欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJS中watch監(jiān)聽用法分析

 更新時間：2016年11月04日 10:27:53   作者：自由港  
這篇文章主要介紹了AngularJS中watch監(jiān)聽用法,較為詳細的分析了$watch的具體功能、相關參數(shù)用法與使用注意事項,需要的朋友可以參考下

本文實例講述了AngularJS中watch監(jiān)聽用法。分享給大家供大家參考，具體如下：

ANGULAR 監(jiān)聽使用：

當angular數(shù)據(jù)模型發(fā)生變化時，我們需要如果需要根據(jù)他的變化觸發(fā)其他的事件。

$watch是一個scope函數(shù)，用于監(jiān)聽模型變化，當你的模型部分發(fā)生變化時它會通知你。

$watch(watchExpression, listener, objectEquality);

watchExpression 需要監(jiān)控的表達式
listener 處理函數(shù)，函數(shù)參數(shù)如下 
function(newValue,oldValue, scope)
objectEquality 是否深度監(jiān)聽，如果設置為true,它告訴Angular檢查所監(jiān)控的對象中每一個屬性的變化. 如果你希望監(jiān)控數(shù)組的個別元素或者對象的屬性而不是一個普通的值, 那么你應該使用它 

<!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>

此代碼監(jiān)控$scope的name值的變化，如果發(fā)生變化則觸發(fā)監(jiān)聽。

監(jiān)控對象：

<!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>

這里我們點擊按鈕會發(fā)現(xiàn)監(jiān)控并不會觸發(fā)，原因是我們監(jiān)控了user對象，這個user對象沒喲發(fā)生變化，只不過屬性值發(fā)生了變化。

如果我們希望監(jiān)控user對象屬性發(fā)生變化，有兩個做法。

1.使用深度監(jiān)控。

方法如下：

<!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>

設置為深度監(jiān)控，只要對象發(fā)生變化，那么監(jiān)聽就會觸發(fā)。

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

var watch=$scope.$watch('user.name', function(newValue, oldValue) {
//具體代碼就不全部寫了。

消除監(jiān)聽

系統(tǒng)中太多的監(jiān)聽會影響系統(tǒng)的性能，我們可以在滿足某些條件后，去掉監(jiān)聽。

去掉監(jiān)聽方法如下：

var watch=$scope.$watch('user', function(newValue, oldValue) {
  if (newValue === oldValue) { return; }
  $scope.updated++;
  $scope.$broadcast('userUpdate', newValue.name);
  },true);
//去掉監(jiān)聽。
watch();

在系統(tǒng)中使用事件廣播。

比如在監(jiān)聽時，我們對外廣播一個事件，

在控制其中寫監(jiān)聽的處理方法：

實例如下：

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

監(jiān)聽代碼：

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

這種做法最好使用在指令中，指令中廣播事件，在控制器中實現(xiàn)監(jiān)聽。好處在于實現(xiàn)代碼的重用。

希望本文所述對大家AngularJS程序設計有所幫助。

相關文章

最新評論