下面的函数定义了根镜中的一个变量.
function MyCtrl($scope,$rootScope) {
$rootScope.buttons = [{href: '#/students',icon:'icon-ok'},{href: '#/students',icon:'icon-remove'},{href: '#/students/new',icon:'icon-plus'}];
}
MyCtrl.$inject = ['$scope','$rootScope'];
下面的指令中的html取决于rootscope中的变量 –
angular.module('btnbar.directive',[]).
directive("btnBar",function(){
return {
restrict: 'E',scope :{},controller: function($scope,$element,$rootScope) {
},template:'<div class="btn-toolbar">' +
'<a class="btn" ng-repeat="b in buttons" href={{b.href}}>' +
'<i class={{b.icon}}></i></a></div>',replace:true
}
});
但是上面的代码不行.如果我直接在指令范围中定义了“buttons”var,它将起作用.
您的指令中有一个隔离范围
scope:{}
这意味着该指令无法访问上层范围 – 请记住隔离范围不会从父范围原型继承.因此,您可以删除隔离范围,也可以告诉该指令将一些属性与父范围的本地范围绑定.
scope: {buttons: '='}
然后调用这样的指令
<btn-bar buttons="buttons"></btn-bar>
示例：http://plnkr.co/edit/88R66L7uAHoezDZvuoH5?p=preview
另外,不要从控制器修改$rootScope,您可能希望从run方法中执行此操作
var app = angular.module('app',['btnbar.directive']);
app.run(function($rootScope){
$rootScope.buttons = [{href: '#/students',icon:'icon-plus'}];
});
