AngularJSディレクティブ内の双方向バインディングは、ng-clickで動作しますが、window.onclickとは動作しません。

誰でも説明できます。なぜなら、要素をクリックすると、なぜが更新されるのですか？ビュー層の更新（ただし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を変更しますか？

出典

2016-08-18 vologa

これを試してみてください：

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

があなたのコントローラ

に$スコープを注入することを忘れないでくださいvm.randomがあなたの$scopeに直接ではないですが、角度はまだそれが変更されたことを、知っている必要があります。 $scope.$applyを手動で呼び出してください。

それはng-clickで動作する理由は、角度の指令が自動的に$スコープ用

出典

2016-08-18 10:36:59

をINGの$scope.$applyの世話をすること、である。$適用 '+ 1 'https://plnkr.co/edit/fy0yPf4DyyOjGbchA4Eg?p=preview –

例にしてくれてありがとう@RJ –

このようにも動作します： 'window.onclick = funciton（）{ vm.update（）; $スコープ。$ apply（）; } ' – vologa

AngularJSディレクティブ内の双方向バインディングは、ng-clickで動作しますが、window.onclickとは動作しません。

答えて

関連する問題