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/

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