Question

所以，我有两个指令，一个有模板文件，其中包含另一个相同类型的指令。

第一个指令如下：

.directive('billInfo', function () {
    return {
        // scope: true,
        scope: {
            obj: '='
        },
        restrict: 'E',
        templateUrl: 'views/templates/bill-info.html',
        link: function (scope, element, attrs) {
            scope.status = scope.obj.getStatus();
            scope.bill = scope.obj;
        }
    }
})

模板很简单，就像;

<h4>
  <span class="glyphicon glyphicon-cutlery">
    {{bill.getTable()}}
  </span>
  <small><span class="time"></span></small>
  <div class="btn-group bill-btn">
      <bill-btns billobj="bill"></bill-btns>
  </div>
</h4>

billBtns的指令如下：

.directive('billBtns', function () {
    return {
        scope: {
            billobj: '='
        },
        restrict: 'E',
        template: '<div><div>koko{{status}}</div></div>',
        link: function (scope, element, attrs) {
            console.log(scope, scope.billobj);
            scope.status = scope.billobj.getStatus();
        }
    }
})

问题出乎意料：scope.billobj原来是未定义的。当我从billBtns指令的link函数中控制log scope 时，一切似乎都可以：我可以在范围内看到billobj。

这里发生了什么？我在这里做了一些根本错误的事情吗？

编辑：billInfo的模板

  <div draggable ng-repeat="(index, bill) in getEnq()" bill="bill" id="bill-{{bill.orderCode}}" class="container panel panel-default bill float-{{index%2}}" style="width:300px;" data-created="{{bill.getCreatedOn()}}">
    <bill-info obj="bill"></bill-info>
  </div>

Answer 1

我相信我已经找到了解决方案，但我不确定这是否是正确的做法。这是新的billBtns指令的样子：

.directive('billBtns', function () {
    return {
        restrict: 'E',
        template: '<div><div>koko{{status}}</div></div>',
        link: function (scope, element, attrs) {
            console.log(scope, scope.$parent.obj);
            scope.status = scope.$parent.bill.getStatus();
        }
    }
})

这解决了这个问题。我怀疑是这样，如果我们再次查看billInfo指令，我会做类似的事情：

    scope.bill = scope.obj; // woah?

我想更多地了解为什么会发生这种情况以及为什么我可以访问范围。$ parent.bill来自嵌套指令但不是范围。$ parent.obj没有获取类型错误。或许这就是级联范围的方式。

AngularJS：嵌套指令中的对象是否未定义？

1 个答案: