AngularJS：当从指令调用控制器的方法时，绑定不起作用答案

【问题标题】：AngularJS : binding doesn't work when a method of a controller is called from a directiveAngularJS：当从指令调用控制器的方法时，绑定不起作用
【发布时间】：2015-01-12 13:09:27
【问题描述】：

在下面的代码中，当我单击span 时，新的movesNumber 值会在视图上更新，但是当从指令调用方法newMove() 时，@ 中movesNumber 的值987654325@ 范围增加但未在视图中更新。

我猜当从指令调用控制器的范围时，绑定有一些特定的东西，但我不知道如何。

这是我的 HTML：

<section ng-controller="gameCtrl" ng-show="gameIsVisible">

  <span ng-click="newMove()">{{ movesNumber }} / {{ maxRightMovesNumber }}</span>

  <block ng-repeat="block in game[selectedChapter].levels[selectedLevel].blocks"></block>

</section>

这是我的控制器：

app.controller(
  'gameCtrl',
  [
    '$scope', '$rootScope', '$document', 'localStorage',
    function ($scope, $rootScope, $document, localStorage)
    {
      $scope.newMove = function()
      {
        $scope.movesNumber ++;
      };
    }
  ]
);

这是我的指令：

app.directive(
  'block',
  [
    "$rootScope", "$document",
    function($rootScope, $document)
    {
      function link(scope, element, attributes)
      {
        if(scope.block.isDroppable)
        {
          $document.on('blockDropped', checkDroppedElement);
        }

        function checkDroppedElement(event)
        {
          scope.$parent.newMove();
        }
      }

      return {
        restrict: 'E',
        template: '{{ block.value }}',
        link:     link
      };
    }
  ]
);

【问题讨论】：

你不需要做 $parent 因为它们共享相同的范围
@JsIsAwesome 不，还有 ngRepeat。
那又怎样？我不明白
ngRepeat 创建新的子范围。
但是 newMove() 在 ng-repeat 之外。

标签： javascript angularjs binding

【解决方案1】：

外部 DOM 事件超出角度 $digest 循环：

$document.on('blockDropped', checkDroppedElement);

你需要手动$apply：

function checkDroppedElement(event) {
      scope.$parent.$apply(function () {
          scope.$parent.newMove();
      });
}

【讨论】：