javascript - ngClass 绑定未通过指令通信更新

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/

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