2016-08-18 43 views
0

任何人都可以解釋,爲什麼當我點擊我的元素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?

回答

4

試試這個:

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

記住注入$範圍到控制器中

即使vm.random不是直接在$scope,角仍然需要知道,它已經改變了。請致電$scope.$apply手動處理。

它與ng-click的原因是,該角的指令自動處理的$scope.$apply荷蘭國際集團

+1

爲$範圍。$'申請+ 1' https://plnkr.co/edit/fy0yPf4DyyOjGbchA4Eg?p=preview –

+0

感謝您將它作爲示例@RJ –

+0

也可以這種方式工作:'window.onclick = funciton(){ vm.update(); $範圍$適用()。 }' – vologa

相關問題