Question

我想嵌套两个指令，inner directive有一个ng-class绑定到一个函数，该函数从内部和外部作用域获取作用域属性并返回一个布尔值

这是HTML：

<ul my-toolbar disabled-when="myCtrl.isProcessing" >
  <li my-action-button action="myCtrl.action()" disable-when="myCtrl.isSad()" />
</ul>

这是我的外部指令：

myApp.directive("myToolbar", function() {
  return {
    restrict: 'A',
    scope: {
      disabled: '=disabledWhen'
    },
    transclude: true,
    controller: function($scope) {
      this.isDisabled = function() {
        return $scope.disabled;
      }
    }
  };
});

这是我的内心指示：

myApp.directive("myActionButton", function() {
  return {
    restrict: 'A',
    scope: {
      action: '&',
      disabled: '=disabledWhen'
    },
    replace: true,
    template: "<li ng-class='{disabled: isDisabled()}'><a ng-click='isDisabled() || action()' /></li>",
    link: function(scope, elem, attrs, toolbarCtrl) {
        scope.isDisabled = function() {
          return toolbarCtrl.isDisabled() || scope.disabled;
        };
    }
  };
});

现在问题是ng-class='{disabled: isDisabled()}'绑定在开始时初始化了一次，但在myCtrl.isProcessing更改时没有更新！

有人可以解释一下原因吗？如何在不改变设计的情况下解决这个问题？

Answer 1

@Jonathan根据要求我将我的angular code放在一个小提琴中（这是让我感到恼火的一部分）它有效！

http://jsfiddle.net/shantanusinghal/ST3kH/1/

现在，我将回过头来看看为什么它在我的生产代码中对我不起作用!! *困惑

ngClass绑定不通过指令通信更新

1 个答案: