Question

我正在尝试编写我的第一个AngularJS指令;它基本上是一段代码，可以从最大数量的星星中模糊出许多星星（徽章）。

指令中的link：function（）代码似乎无法访问传入的非静态值的范围变量（尽管模板代码可以）。

我是否需要将链接：代码放在别处？

html：

<span class="badge"><span sa-motes mote-count="character.attributes.stamina.value" mote-max="5" stat-name="character.attributes.stamina.name"></span> </span>

mote-max =“5”生成i，但mote-count =“character.attributes.stamina.value”却没有。（在范围中显示为null

字符....数据加载到控制器中，用于此部分。

指令：

sistemaDirectives.directive('saMotes', function() {
      return {
    restrict: 'A',
        scope: {
            moteCount: '=',
            moteMax: '=',
            statName: '@'
        },
    template: '<span ng-repeat="mote in motes" class="glyphicon glyphicon-certificate" ng-class="{\'mote-empty\':$index>moteCount+1}"> </span>',
        link: function(scope, elem, attrs, ctrl ) {
            scope.motes = [];           
            for (var i = 0; i< scope.moteMax; i++) {
                scope.motes.push( i );
            }}}});

我在我的视图中尝试了这个内联代码并且它有效：

<span class="badge">
<span class="glyphicon glyphicon-certificate" ng-repeat="i in  getNumber(character.attributes.strength.value) track by $index"></span><span class="glyphicon glyphicon-certificate mote-empty" ng-repeat="i in  getNumber(character.attributes.strength.max - character.attributes.strength.value) track by $index">
</span></span>

getNum函数只是创建一个数组（在控制器中）：

$scope.getNumber = function(num) {
    return new Array(num);   
}

帮助？

Answer 1

如果我理解正确，你说scope.moteCount在链接函数中不可用，它应该是。只要character.attributes.stamina.value具有有效值。

看一下只使用alert来显示moteCount值的Fiddle。

我刚拿了你的代码并用

启动了周围的控制器

$scope.character = {attributes: {stamina: {value: 10, name: 'theName'}}};

更新

由于您正在异步地获取传递给指令的值，因此当链接函数执行时，它们可能没有准备好。使用链接功能中的手表，以便在数据准备就绪时收到通知

  scope.$watch('mouteCount',function(newValue, oldValue){
    if(newValue !== oldValue){
      console.log({label:'watch', value: scope.mouteCount});
    }
  });

AngularJS指令绑定链接：无法访问范围变量

1 个答案: