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);
}
}
6006
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
