AngularJS指令中的双向绑定使用ng-click工作，但不能与window.onclick工作

问题描述：

任何人都可以解释，为什么当我点击我的元素vm.random更新元素内，但是当我点击只是在窗口vm.random没有视图层（但console.log打印新值）上的更新，尽管这两个事件触发相同的功能vm.update()AngularJS指令中的双向绑定使用ng-click工作，但不能与window.onclick工作

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" 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？

答

试试这个：

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

记住注入$范围到控制器中

即使vm.random不是直接在$scope，角仍然需要知道，它已经改变了。请致电$scope.$apply手动处理。

它与ng-click的原因是，该角的指令自动处理的$scope.$apply荷兰国际集团

为$范围。$'申请+ 1' https://plnkr.co/edit/fy0yPf4DyyOjGbchA4Eg?p=preview –

感谢您将它作为示例@RJ –

也可以这种方式工作：'window.onclick = funciton（）{ vm.update（）; $范围$适用（）。 }' – vologa

AngularJS指令中的双向绑定使用ng-click工作，但不能与window.onclick工作

相关推荐