指令中 controller && controllerAs
2015-04-27 15:42 yuan001 阅读(824) 评论(0) 编辑 收藏 举报1, controller 他会暴露一个API,利用这个API可以在多个指令之间通过依赖注入进行通信。
controller($scope, $element, $attrs, $tranclude)
2, controllerAs 是给controller起个别名,方便使用
3, require 可以将其他指令传给自己
directiveName 通过驼峰法的命名指定了控制器应该带有哪一条指令,默认会从同一个元素的指令
^directiveName 在父即查找指令
?directiveName 表示指令可选的,如果找不到,不需要抛出移除
eg: 1
<div ng-controller="myCtrl"> <div book-list></div> </div> <script type="text/javascript" src="js/angular.js"></script> <script type="text/javascript"> angular.module('myApp', []) .controller('myCtrl', ['$scope', function(scope){ console.log(scope) scope.bookData = [ { name : 'js'}, { name : 'java'}, {name : 'html+css'} ]; }]) .directive('bookList', function(){ return { restrict : 'EAMC', replace : true, template : '<ul><li ng-repeat="item in bookData">{{item.name}}</li></ul>' } }) </script>
eg2: 把控制器中的数据放到指令中的controller中 angular.module('myApp', []) .controller('myCtrl', ['$scope', function(scope){ }]) .directive('bookList', function(){ return { restrict : 'EAMC', replace : true, controller : function($scope){//可以在多个指令间通过依赖注入进行通信 //这里的$scope跟myCtl里面的$scope是一样的 $scope.bookData = [ //把myCtrl里面的数据放到指令controller里面 { name : 'js'}, { name : 'java'}, {name : 'html+css'} ]; this.add = function(){ alert(1) } }, controllerAs : "bookListCtrl",//跟指令中的controller起一个别名 link : function($scope, element, attr, bookListCtrl){ bookListCtrl.add(); }, template : '<ul><li ng-repeat="item in bookData">{{item.name}}</li></ul>' } })