AngularJS：綁定一個事件

我寫了這個代碼解壓到我面臨的問題致電服務時，不適用：AngularJS：綁定一個事件

當我直接調用通過NG-點擊（「TEST 2 myService() 「按鈕），myObject.myProperty的值被更新並綁定（視圖顯示新值）。

但是，當我添加一個事件偵聽器（「測試1」按鈕），它的值更新，但沒有綁定。我可以檢查，因爲「什麼是價值？」當我點擊它時突然應用綁定。

然後我真的不明白爲什麼在事件監聽器的情況下這個值沒有綁定？

<!DOCTYPE html> 
<html ng-app="testApp"> 
    <head><title>Test</title></head> 
    <body> 

     <section ng-controller="MainController"> 
      {{ myObject.myProperty }} ! 

      <p> 
       <button id="my-button">TEST 1</button> 
       <button ng-click="callMyService()">TEST 2</button> 
      </p> 

      <p><button ng-click="whatIsTheValue()">WHAT IS THE VALUE ?</button></p> 
     </section> 

     <script src="angular.js"></script> 
     <script> 
      var app = angular.module('testApp', []); 

      app.run(function($rootScope, $document, myService) 
      { 
       $rootScope.myObject = { myProperty: 'Run' }; 

       angular.element(document.getElementById('my-button')).bind('click', function(event) 
       { 
        myService(); 
       }); 
      }); 

      app.service('myService', function($rootScope) 
      { 
       return function() 
       { 
        console.log($rootScope.myObject.myProperty); 

        $rootScope.myObject.myProperty = 'Service'; 

        console.log($rootScope.myObject.myProperty); 
       }; 
      }); 

      app.controller('MainController', function($scope, myService, $interval) 
      { 
       $scope.myObject.myProperty = 'Controller'; 

       $scope.callMyService = function() 
       { 
        myService(); 
       }; 

       $scope.whatIsTheValue = function() 
       { 
        console.log($scope.myObject.myProperty); 
       }; 
      }); 
     </script> 

    </body> 
</html>

來源

2015-06-07 Ivan Gabriele

嘗試添加$rootScope.$apply()後myService()

angular.element(document.getElementById('my-button')).bind('click', function(event) 
{ 
    myService(); 
    $rootScope.$apply() 
});

來源

2015-06-07 14:56:21

它完美，謝謝！ –

使用'ng-'事件是說角度的方法，請更新相關的'binds'，否則你需要明確地使用'$ apply（）'來處理它。 – vinayakj

是的。在ng事件中，Angular在默認情況下將其添加到最後，儘管這可能會讓你感興趣：http://jimhoskins.com/2012/12/17/angularjs-and-apply.html –

AngularJS：綁定一個事件

回答

相關問題