1.$watch簡單使用
$watch是一個scope函數,用於監聽模型變化,當你的模型部分發生變化時它會通知你。
$watch(watchExpression, listener, objectEquality);
每個參數的說明如下:
-
watchExpression:監聽的對象,它可以是一個angular表達式如'name',或函數如function(){return $scope.name}。
-
listener:當watchExpression變化時會被調用的函數或者表達式,它接收3個參數:newValue(新值), oldValue(舊值), scope(作用域的引用)
-
objectEquality:是否深度監聽,如果設置為true,它告訴Angular檢查所監控的對象中每一個屬性的變化. 如果你希望監控數組的個別元素或者對象的屬性而不是一個普通的值, 那么你應該使用它
$watch可以監聽多個模型的變化
<body ng-app="app" ng-controller="first">
<button ng-click="name='a'">1</button>
<button ng-click="name='b'">2</button>
<button ng-click="name='c'">3</button>
<button ng-click="type=2">4</button>
<button ng-click="type=3">5</button>
<p>{{name}}</p>
</body>
<script type="text/javascript">
var app = angular.module("app", []);
app.controller("first", function($scope) {
$scope.name = 'q';
$scope.type = 1;
function te() {
console.log($scope.name+" "+ $scope.type);
}
$scope.$watch('name+type', function(newValue, oldValue) { //2個參數為 一個為新值,一個為舊值
te();
});
})
</script>
2.$on的用法
$on是一個scope函數,用於監聽事件的變化,當你的事件發生時它會通知你。
module.controller('freefedCtrl',['$scope',function($scope){
//監聽directiveClick事件
$scope.$on('directiveClick',function(event,param){
console.log( param ); // 打印結果 {title : '我是來自指令子級作用域'}
});
$scope.change = function(title){
var result = '請注意接收父級廣播';
//向子級作用域廣播parentBroadcast事件
$scope.$broadcast('parentBroadcast',{msg : result});
};
}]);
