AngularJS 指令中的双向绑定适用于 ng-click，但不适用于 window.onclick

Question

谁能解释一下，为什么当我点击我的元素时 vm.random 在元素内部更新，但是当我只点击 window vm.random 时视图层没有更新（但是 console.log 打印新值），尽管两个事件触发相同的函数 vm.update()

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.5.9" data-semver="1.5.9" src="https://code.angularjs.org/1.5.8/angular.js"></script>
  <script>
    var app = angular.module('test', [])
      .directive('testDir', function() {
        return {
          controllerAs: 'vm',
          bindToController: true,
          controller: function() {
            var vm = this;
            vm.random = Math.random();

            window.onclick = function() {
              vm.update();
            };

            vm.update = function() {
              vm.random = Math.random();
              console.log(vm.random);
            };
          },
          template: '<div ng-click="vm.update()">Random number after click {{vm.random}}<input ng-model="vm.random"/></div>'
        }
      });
  </script>
</head>

<body ng-app="test">
  <h1>My directive</h1>
  <test-dir></test-dir>
</body>

</html>

为了能够在 window.onlick 更改 vm.random 后更新 vm.random，我应该在此代码段中更改什么？

Answer 1

试试这个：

window.onclick = funciton(){
    $scope.$apply(function(){
        vm.update();
    });
}

记得将 $scope 注入你的控制器

即使 vm.random 不直接在您的 $scope 上，angular 仍然需要知道它已经改变。手动调用 $scope.$apply 会解决这个问题。

它与 ng-click 一起工作的原因是，angular 指令自动处理 $scope.$applying

AngularJS 指令中的双向绑定适用于 ng-click，但不适用于 window.onclick

Two-way binding inside AngularJS directive work with ng-click, but not work with window.onclick

javascript

two-way

angularjs

angular-directive