1+ <!doctype html>
2+ < html ng-app ="Demo ">
3+ < head >
4+ < meta charset ="utf-8 " />
5+
6+ < title >
7+ Migrating From ui-if To ng-if 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+ Migrating From ui-if To ng-if In AngularJS
16+ </ h1 >
17+
18+ < p >
19+ Clicks:
20+ < a ng-click ="incrementCount( 1 ) "> Increment</ a >
21+ —
22+ < a ng-click ="incrementCount( -1 ) "> Decrement</ a >
23+ </ p >
24+
25+ <!-- Conditionally include element with UI-IF (Angular-UI). -->
26+ < p ui-if ="clickCount " bn-log ="ui-if : {{ clickCount }} ">
27+ You've clicked me {{ clickCount }} time(s)!
28+ </ p >
29+
30+ <!-- Conditionally include element with NG-IF (AngularJS). -->
31+ < p ng-if ="clickCount " bn-log ="ng-if : {{ clickCount }} ">
32+ You've clicked me {{ clickCount }} time(s)!
33+ </ p >
34+
35+
36+ <!-- Load scripts. -->
37+ < script type ="text/javascript " src ="../../vendor/jquery/jquery-2.1.0.min.js "> </ script >
38+ < script type ="text/javascript " src ="../../vendor/angularjs/angular-1.2.19.js "> </ script >
39+ < script type ="text/javascript ">
40+
41+ // Create an application module for our demo.
42+ var app = angular . module ( "Demo" , [ ] ) ;
43+
44+
45+ // -------------------------------------------------- //
46+ // -------------------------------------------------- //
47+
48+
49+ // I control the root of the application.
50+ app . controller (
51+ "AppController" ,
52+ function ( $scope , $interpolate ) {
53+
54+ $scope . clickCount = 0 ;
55+
56+
57+ // ---
58+ // PUBLIC METHODS.
59+ // ---
60+
61+
62+ // I increment the click count by the given delta.
63+ $scope . incrementCount = function ( increment ) {
64+
65+ $scope . clickCount += ( increment || 1 ) ;
66+
67+ } ;
68+
69+ }
70+ ) ;
71+
72+
73+ // -------------------------------------------------- //
74+ // -------------------------------------------------- //
75+
76+
77+ // I log out the value of the directive attirbute with a timestamp. This is
78+ // here to track when the DOM is being linked.
79+ app . directive (
80+ "bnLog" ,
81+ function ( ) {
82+
83+ // I bind the JavaScript events to the scope.
84+ function link ( $scope , element , attributes ) {
85+
86+ console . log ( "Linked" , attributes . bnLog ) ;
87+
88+ }
89+
90+
91+ // Return the directive configuration.
92+ return ( {
93+ link : link ,
94+ restrict : "A"
95+ } ) ;
96+
97+ }
98+ ) ;
99+
100+
101+ // -------------------------------------------------- //
102+ // -------------------------------------------------- //
103+
104+
105+ // Define "ui-if" for our application.
106+ // --
107+ // NOTE: This was taken from the old Angular-UI source code v0.2.1.
108+ app . directive (
109+ "uiIf" ,
110+ function ( ) {
111+ return {
112+ transclude : 'element' ,
113+ priority : 1000 ,
114+ terminal : true ,
115+ restrict : 'A' ,
116+ compile : function ( element , attr , linker ) {
117+ return function ( scope , iterStartElement , attr ) {
118+ iterStartElement [ 0 ] . doNotMove = true ;
119+ var expression = attr . uiIf ;
120+ var lastElement ;
121+ var lastScope ;
122+ scope . $watch ( expression , function ( newValue ) {
123+ if ( lastElement ) {
124+ lastElement . remove ( ) ;
125+ lastElement = null ;
126+ }
127+ if ( lastScope ) {
128+ lastScope . $destroy ( ) ;
129+ lastScope = null ;
130+ }
131+ if ( newValue ) {
132+ lastScope = scope . $new ( ) ;
133+ linker ( lastScope , function ( clone ) {
134+ lastElement = clone ;
135+ iterStartElement . after ( clone ) ;
136+ } ) ;
137+ }
138+ iterStartElement . parent ( ) . trigger ( "$childrenChanged" ) ;
139+ } ) ;
140+ } ;
141+ }
142+ } ;
143+ }
144+ ) ;
145+
146+ </ script >
147+
148+ </ body >
149+ </ html >
0 commit comments