1）主頁面（index.html）
<!DOCTYPE html>
<html ng-app="my_app">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/angular.min-1.69.js"></script>
<script type="text/javascript" src="js/MyStudent.js"></script>
<script type="text/javascript">
var app = angular.module("my_app", []);
app.controller('my_controller', function($scope) {
/* 組件數據源 */
$scope.students = [{
id: '1',
name: '張三'
},
{
id: '2',
name: '李四'
},
{
id: '3',
name: '王五'
}
];
/* 組件顏色 */
$scope.colorstyle = "color:red;";
});
/* 定義組件 */
app.component('myStudent', {
templateUrl: 'Components/MyStudent.html',
/* 組件頁面 */
controller: studentController,
/* 組件控制器 */
bindings: { /* 組件參數 */
autodata: '=',
colorstyle: '='
}
});
app.run(function($timeout) { //等待AngularJS加載完成之後觸發事件
var a = $timeout(function() {
var my_li = document.getElementsByClassName("my_li");
console.log('app.run:' + my_li.length);
}, 1000);
});
</script>
</head>
<body ng-controller="my_controller">
<my-student autodata="students" colorstyle="colorstyle"></my-student>
</body>
</html>
2）組件頁面（MyStudent.html）
<div ng-init="init()">
<ul>
<li ng-repeat="item in $ctrl.autodata" id="{{item.id}}" style="{{$ctrl.colorstyle}}" class="my_li">{{item.name}}</li>
</ul>
</div>
3）組件JS（MyStudent.js）
function studentController($scope) {
$scope.parentCtrl = $scope.$parent;
//組件初始化
$scope.init = function() {
var my_li = document.getElementsByClassName("my_li");
console.log('init:' + my_li.length);
}
}