angular學習筆記 十四 watch 1

本篇主要介紹$watch的基本概念:

$watch是所有控制器的$scope中內建的方法:

$scope.$watch(watchobj,watchcallback,ifdeep)

watchobj:

需要被檢測的物件,可以是以下任意一種:

1. 某個資料,監測這個資料的值是否發生變化

2. 一條angular表示式,監測表示式的結果是否發生變化

3. 函式(),監測函式的返回值是否發生變化

注意,以上三種,無論是哪種,都應該是字串格式,並且都是在$scope作用域下執行的.

4.函式,非字串格式,而是直接傳入乙個函式,可以直接寫乙個匿名函式,也可以傳入乙個函式,注意,它不是在$scope作用域下的,所以,如果傳入的是當前作用域下的函式,還是需要寫:$scope.fun

watchcallback :

接受乙個函式或者表示式,當watchobj發生變化是會被呼叫或執行.

如果是函式形式,它會收到三個引數:

watchcallback (newvalue,oldvalue,scope)

newvalue: watchobj的新的值 

oldvalue: watchobj的舊的值

scope: 就是當前控制器的$scope

注意:函式或者表示式不是在$scope作用域下執行的,所以,如果是需要呼叫當前作用域下的某個函式,應該$scope.watchcallback

ifdeep: 

乙個布林值

如果 watchobj 的型別是物件或者陣列的時候, ifdeep值設定為true, 那麼angular會檢測被監控物件的每個屬性是否發生了變化,而不只是檢測乙個簡單的值.

最後,$(watch)會返回乙個函式,這個函式可以用來銷毀該控制器,只需要被呼叫一次即可:

var destroy = $scope.$watch(...);

destroy()

下面看個最基本的例子:

doctype html

>
<
html 
>
<
head
>
<
title
>11.1$watch監控資料變化
title
>
<
meta 
charset
="utf-8"
>
<
script 
src="../angular.js"
>
script
>
<
script 
src="script.js"
>
script
>
<
style 
type
="text/css"
>
*style
>
head
>
<
body
>
<
div 
ng-controller 
= "watch"
>
<
input 
type
="text"
ng-model
="number"
/>
<
span
>}
span
>
div>
body
>
html
>

function

watch ($scope);
$scope.$watch('number',$scope.count,false
)}

其中,count中的三個引數分別接受了number的新值,舊值,以及當前控制器的$scope:

比如我在文字域中輸入3:

遺留問題:

在$watch的第乙個引數中傳入乙個函式時,即使該函式並沒有返回值,一樣可以被監測.so,不明白它究竟是在監測什麼東西的變化. 

angular學習筆記 十四 watch 2

下面來看乙個 watch的比較複雜的例子 還是回到一開始講的購物車例子,給它新增乙個計算總價和折扣的功能,如果總價超過500,則優惠10 如下 doctype html html head title 11.1 watch監控資料變化 title meta charset utf 8 script ...

Angular學習筆記 Angular生命週期

生命週期函式通俗的講就是元件建立 元件更新 元件銷毀的時候會觸發的一系列的方法。當 angular 使用建構函式新建乙個元件或指令後，就會按下面的順序在特定時刻呼叫這些生命週期鉤子方法。當 angular 使用建構函式新建乙個元件或指令後，就會按下面的順序在特定時刻呼叫這些生命週期鉤子方法 鉤子用途...

Angular學習筆記

1.nodejs 2.npm 3.cnpm 4.yarn 4.vscode 1.建立專案的 命令 ng new project name style scss 引數 style 使用的css型別,可以是css,sacc,scss,less,預設值是css 2.初始化node modules 命令 1...