2016-08-18 13 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를 업데이트 할 수 VMm을 바꾸시겠습니까?

답변

4

이 시도 :

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

이 컨트롤러

비록 vm.random에 $ 범위를 주입하는 것을 기억하는 것은 당신의 $scope에 직접 아니라, 각은 여전히 ​​변경된 것을 알 필요가있다. 전화를 $scope.$apply 수동으로 처리합니다.

ng-click와 함께 작동하는 이유는 각 지시어가 자동으로 $의 범위에 대한

+1

보내고 $scope.$apply을 담당한다는 것이다. $는'적용 + 1' https://plnkr.co/edit/fy0yPf4DyyOjGbchA4Eg?p=preview –

+0

예제를 작성해 주셔서 감사합니다. @RJ –

+0

이 방법으로도 작업하십시오 :'window.onclick = funciton() { vm.update(); $ scope. $ apply(); }' – vologa