1+ <!doctype html>
2+ < html ng-app ="Demo ">
3+ < head >
4+ < meta charset ="utf-8 " />
5+
6+ < title >
7+ Using Scope.$watch() To Watch Functions In AngularJS
8+ </ title >
9+
10+ < link rel ="stylesheet " type ="text/css " href ="./demo.css "> </ link >
11+ </ head >
12+ < body ng-controller ="AppController ">
13+
14+ < h1 >
15+ Using Scope.$watch() To Watch Functions In AngularJS
16+ </ h1 >
17+
18+ < p >
19+ < strong > Best Friend:</ strong >
20+
21+ < a
22+ ng-click ="setBestFriend( tricia ) "
23+ ng-class ="{ best: tricia.isBestFriend } "
24+ > {{ tricia.name }}</ a >
25+
26+ or
27+
28+ < a
29+ ng-click ="setBestFriend( joanna ) "
30+ ng-class ="{ best: joanna.isBestFriend } "
31+ > {{ joanna.name }}</ a >
32+ </ p >
33+
34+
35+ <!-- Load scripts. -->
36+ < script type ="text/javascript " src ="../../vendor/jquery/jquery-2.1.0.min.js "> </ script >
37+ < script type ="text/javascript " src ="../../vendor/angularjs/angular-1.2.19.min.js "> </ script >
38+ < script type ="text/javascript ">
39+
40+ // Create an application module for our demo.
41+ var app = angular . module ( "Demo" , [ ] ) ;
42+
43+
44+ // -------------------------------------------------- //
45+ // -------------------------------------------------- //
46+
47+
48+ // I control the root of the application.
49+ app . controller (
50+ "AppController" ,
51+ function ( $scope , $interpolate ) {
52+
53+ $scope . tricia = {
54+ name : "Tricia" ,
55+ isBestFriend : 1
56+ } ;
57+
58+ $scope . joanna = {
59+ name : "Joanna" ,
60+ isBestFriend : 0
61+ } ;
62+
63+ $scope . bestFriend = $scope . tricia ;
64+
65+
66+ // Normally, we would $watch() a scope reference. But, in the following
67+ // cases, we're going to watch Functions. When we do this, the watch
68+ // function will be called mulitple times per-digest. If you return a
69+ // value from the watch function, this value will be used to determine if
70+ // the watch callback should be triggered (on value change event).
71+
72+ // Notice that $scope is passed-in as the first argument.
73+ $scope . $watch (
74+ function ( $scope ) {
75+
76+ console . log ( "Function watched" ) ;
77+
78+ // This becomes the value we're "watching".
79+ return ( "Function: Best friend is " + $scope . bestFriend . name ) ;
80+
81+ } ,
82+ function ( newValue ) {
83+
84+ console . log ( newValue ) ;
85+
86+ }
87+ ) ;
88+
89+ // Since $scope is passed into the watch function (see example above), it
90+ // means that we can watch any function that expects the scope as an
91+ // argument and returns a value in response. A great example of this is
92+ // the $interpolate() function - it returns a function that expects the
93+ // scope and returns the result of the interpolated value in that scope
94+ // context. As such, it's suited perfectly to watch interpolated values.
95+ $scope . $watch (
96+ $interpolate ( "Interpolate: Best frined is {{ bestFriend.name }}" ) ,
97+ function ( newValue ) {
98+
99+ console . log ( newValue ) ;
100+
101+ }
102+ ) ;
103+
104+ // This is here as a "control" - not really part of the primary demo;
105+ // but, can show the enhanced readability that is provided by
106+ // $interpolate(), which is doing the same thing.
107+ $scope . $watch (
108+ "( 'Literal: Best frined is ' + bestFriend.name )" ,
109+ function ( newValue ) {
110+
111+ console . log ( newValue ) ;
112+
113+ }
114+ ) ;
115+
116+
117+ // ---
118+ // PUBLIC METHODS.
119+ // ---
120+
121+
122+ // I set the best friend. Since there can only be one best friend at a
123+ // time, the previous one is removed from grace.
124+ $scope . setBestFriend = function ( friend ) {
125+
126+ // Reset the current bestie.
127+ $scope . bestFriend . isBestFriend = false ;
128+
129+ // Set the new one.
130+ $scope . bestFriend = friend ;
131+ $scope . bestFriend . isBestFriend = true ;
132+
133+ } ;
134+
135+ }
136+ ) ;
137+
138+ </ script >
139+
140+ </ body >
141+ </ html >
0 commit comments