频道导航

angularjs – 无法在指令范围内访问rootscope var

2020-05-23 Angularjs 前端之家

前端之家收集整理的这篇文章主要介绍了angularjs – 无法在指令范围内访问rootscope var，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_403_0@ 下面的函数定义了根镜中的一个变量.

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'}];
});