Angularjs $watch使用方法

時間 2019-11-12

原文原文鏈接

當angular數據模型發生變化時，咱們須要若是須要根據他的變化觸發其餘的事件。javascript

$watch是一個scope函數，用於監聽模型變化，當你的模型部分發生變化時它會通知你。html

$watch(watchExpression, listener, objectEquality);java

watchExpression	須要監控的表達式，注意：表達式須要是model.attribute形式
listener	處理函數，函數參數以下 function(newValue,oldValue, scope)
objectEquality	是否深度監聽，若是設置爲true,它告訴Angular檢查所監控的對象中每個屬性的變化. 若是你但願監控數組的個別元素或者對象的屬性而不是一個普通的值, 那麼你應該使用它

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="assets/angular.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script type="text/javascript">
var app=angular.module("app",[]);
app.controller('MainCtrl', function($scope) {
      $scope.name = "Angular";

      $scope.updated = -1;

      $scope.$watch('name',  function(newValue, oldValue) {
            if (newValue === oldValue) { return; } // AKA first run
            $scope.updated++;
      });
      
      var i=0;
      
      $scope.getScope=function(){
         // console.info(this);
         var obj=$("#btnTest");
         i++;
         angular.element( obj).scope().name="hello" +i;
      }
      
    });
</script>
<body ng-controller="MainCtrl">
  <input ng-model="name" />
  Name updated: {{updated}} times.
  
  <button id="btnTest" ng-click="getScope()">獲取scope</button>
</body>
</html>

此代碼監控$scope的name值的變化，若是發生變化則觸發監聽。jquery

監控對象：數組

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="assets/angular.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script type="text/javascript">
var app=angular.module("app",[]);
app.controller('MainCtrl', function($scope) {
    $scope.user = { name: "Fox" };

      $scope.updated = -1;

      var watch=$scope.$watch('user', function(newValue, oldValue) {
        if (newValue === oldValue) { return; }
        $scope.updated++;
        
        $scope.$broadcast('userUpdate', newValue.name);
      });
      
      //watch();
      var i=0;
      
      $scope.$on('userUpdate',function(d,data){
          console.info(data);
      })
      
      $scope.getScope=function(){
         // console.info(this);
         var obj=$("#btnTest");
         i++;
         angular.element( obj).scope().user.name="hello" +i;
      }
      
    });
</script>
<body ng-controller="MainCtrl">
  <input ng-model="user.name" />
  Name updated: {{updated}} times.
  
  <button id="btnTest" ng-click="getScope()">獲取scope</button>
</body>
</html>

這裏咱們點擊按鈕會發現監控並不會觸發，緣由是咱們監控了user對象，這個user對象沒喲發生變化，只不過屬性值發生了變化。app

若是咱們但願監控user對象屬性發生變化，有兩個作法。函數

1.使用深度監控。性能

方法以下：this

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script src="assets/angular.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script type="text/javascript">
var app=angular.module("app",[]);
app.controller('MainCtrl', function($scope) {
    $scope.user = { name: "Fox" };

      $scope.updated = -1;

      var watch=$scope.$watch('user', function(newValue, oldValue) {
        if (newValue === oldValue) { return; }
        $scope.updated++;
        
        $scope.$broadcast('userUpdate', newValue.name);
      },true);
      
      //watch();
      var i=0;
      
      $scope.$on('userUpdate',function(d,data){
          console.info(data);
      })
      
      $scope.getScope=function(){
         // console.info(this);
         var obj=$("#btnTest");
         i++;
         angular.element( obj).scope().user.name="hello" +i;
      }
      
    });
</script>
<body ng-controller="MainCtrl">
  <input ng-model="user.name" />
  Name updated: {{updated}} times.
  
  <button id="btnTest" ng-click="getScope()">獲取scope</button>
</body>
</html>

設置爲深度監控，只要對象發生變化，那麼監聽就會觸發。spa

2.直接寫對象的屬性值路徑。

var watch=$scope.$watch('user.name', function(newValue, oldValue) {

具體代碼就不所有寫了。

消除監聽

系統中太多的監聽會影響系統的性能，咱們能夠在知足某些條件後，去掉監聽。

去掉監聽方法以下：

var watch=$scope.$watch('user', function(newValue, oldValue) {
        if (newValue === oldValue) { return; }
        $scope.updated++;

        $scope.$broadcast('userUpdate', newValue.name);
      },true);
//去掉監聽。
watch();

在系統中使用事件廣播。

好比在監聽時，咱們對外廣播一個事件，

在控制其中寫監聽的處理方法：

實例以下：

$scope.$broadcast('userUpdate', newValue.name);

監聽代碼：

$scope.$on('userUpdate',function(d,data){
          console.info(data);
      })

這種作法最好使用在指令中，指令中廣播事件，在控制器中實現監聽。好處在於實現代碼的重用。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。