AngularJS : 从指令调用控制器的方法时绑定不起作用

Question

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

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

这是我的 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
      };
    }
  ]
);

Answer 1

外部 DOM 事件超出了 angular $摘要循环：

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

您需要手动$申请：

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

AngularJS : 从指令调用控制器的方法时绑定不起作用

AngularJS : binding doesn't work when a method of a controller is called from a directive

javascript

binding

angularjs