即使$ scope屬性得到更新，爲什麼AngularJS綁定不起作用？

我是AngularJS的新手，我正在努力使綁定關閉。在下面的簡單示例中，我試圖更新UI以顯示jquery滑塊的值（我知道有一個純粹的Angular方法來解決這個問題，但這只是我的縮減測試用例，它仍然會很有助於我理解爲什麼更改$scope.slider_value不會更新視圖）。我錯過了什麼？

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
     <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/flick/jquery-ui.css" />   
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> 
     <script type="text/javascript"> 

      var testApp = angular.module('testApp', []); 
      testApp.controller('testCtrl', function($scope) { 
       $('#slider').slider({ 
        max: 1000, 
        slide: function(event, ui) { 
         $scope.slider_value = ui.value; 
        } 
       }); 
       $scope.slider_value = 0; 
      }); 

     </script> 
     <style> 
      #slider { margin: 20px; } 
      #to_update { margin: 10px; font-family: Arial; } 
     </style> 
    </head> 
    <body ng-app="testApp"> 
     <div ng-controller="testCtrl"> 
      <div id="slider"></div> 
      <div id="to_update">slider value: {{ slider_value }}</div> 
     </div> 
    </body> 
</html>

來源

2014-03-31 rpacker

您正在通過事件角度更新範圍不知道。在這種情況下，您需要將更新包裝在$apply中。

試試這個：

slide: function(event, ui) { 
    $scope.$apply(function() { 
     $scope.slider_value = ui.value; 
    }); 
}

退房的文件上scope.$apply

來源

2014-03-31 03:38:21

這是一個可行的解決問題的辦法，但由於學習的慾望也有人...邏輯訪問DOM應該通過指令處理，而不是通過控制器。這允許控制器更加模塊化和可測試（與指令相同）。考慮製作一個名爲slider的指令，您可以在其中封裝jQuery邏輯/實現。 – Brocco

@Brocco，同意 - 我需要最終包裝在一個指令。感謝您的指導。 – rpacker

@NG。，謝謝 - 這是我錯過了。 – rpacker

即使$ scope屬性得到更新，爲什麼AngularJS綁定不起作用？

回答

相關問題