當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

第215天：Angular---指令

發布時間：2025/4/5 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了第215天：Angular---指令小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

指令（Directive）

AngularJS 有一套完整的、可擴展的、用來幫助 Web 應用開發的指令集

在 DOM 編譯期間，和 HTML 關聯著的指令會被檢測到，并且被執行

在 AngularJS 中將前綴為 ng- 這種屬性稱之為指令，其作用就是為 DOM 元素調用方法、定義行為綁定數據等

簡單說：當一個 Angular 應用啟動，Angular 就會遍歷 DOM 樹來解析 HTML，根據指令不同，完成不同操作

注意：HTML5 允許擴展的（自制的）屬性，以 data- 開頭。

AngularJS 屬性以 ng- 開頭，但是您可以使用 data-ng- 來讓網頁對 HTML5 有效。

二者效果相同。

1、ng-app 指令

ng-app指令用來標明一個AngularJS應用程序

標記在一個AngularJS的作用范圍的根對象上

系統執行時會自動的執行根對象范圍內的其他指令

可以在同一個頁面創建多個ng-app節點

但是angular找到第一個ng-app過后就不會再找

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>ng-app 指令</title> 7 </head> 8 9 <body ng-app="myApp"> 10  11 <div ng-controller="App1Controller"> 12 <input type="button" value="按鈕1" ng-click="do1()"> 13 </div> 14 <div ng-controller="App2Controller"> 15 <input type="button" value="按鈕2" ng-click="do2()"> 16 </div> 17 <script src="bower_components/angular/angular.js"></script> 18 <script> 19 // 零件1 20 var myApp1 = angular.module('myApp1', []); 21 myApp1.controller('App1Controller', ['$scope', function($scope) { 22 $scope.do1 = function() { 23 console.log(11111); 24 }; 25 }]); 26 // 零件2 27 var myApp2 = angular.module('myApp2', []); 28 myApp2.controller('App2Controller', ['$scope', function($scope) { 29 $scope.do2 = function() { 30 console.log(22222); 31 }; 32 }]); 33 34 angular.module('myApp', ['myApp1', 'myApp2']); 35 </script> 36 </body> 37 38 </html>

2、ng-bind指令

ng-bind指令在綁定的值包含HTML時會轉義，為了安全（跨站腳本攻擊）

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>ng-bind-html 指令</title> 7 </head> 8 9 <body ng-app="myApp" ng-init="username='<h1>shit</h1>'"> 10  11  12 <strong ng-bind-html="username"></strong> 13 <script src="bower_components/angular/angular.js"></script> 14 <script src="bower_components/angular-sanitize/angular-sanitize.js"></script> 15 <script> 16 // 使用自定義的模塊才可以依賴別的包里面定義模塊，angular定義的默認模塊沒有依賴任何 17 angular.module('myApp', ['ngSanitize']); 18 </script> 19 </body> 20 21 </html>

3、ng-repeat指令

ng-repeat指令用來編譯一個數組重復創建當前元素，如

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>ng-repeat 指令</title> 6 </head> 7 8 <body ng-app="myApp"> 9 10 <ul ng-controller="ListController"> 11  12 <li ng-repeat="item in ledamei track by $index" data-id="{{item.id}}"> 13 <span>{{$first?'開始':''}}</span> 14 <strong>{{item.name}}</strong> 15      16 <span>{{item.age}}</span> 17 <span>{{$last?'沒有了':''}}</span> 18 </li> 19 </ul> 20 21 <script src="bower_components/angular/angular.js"></script> 22 <script> 23 angular.module('myApp', []) 24 .controller('ListController', ['$scope', function($scope) { 25 26 27 $scope.ledamei = []; 28 29 for (var i = 1; i < 10; i++) { 30 $scope.ledamei[$scope.ledamei.length] = { 31 id: i, 32 name: '樂樂' + i, 33 age: 20 + i 34 }; 35 } 36 37 38 }]); 39 </script> 40 </body> 41 42 </html>

4、ng-class 指令

ng-class指令可以設置一個鍵值對，用于決定是否添加一個特定的類名，鍵為class名，值為bool類型表示是否添加該類名

1 <ul class="messages"> 2 3 <li ng-repeat="item in messages track by $index" ng-class="{red:item.read}"> 4 5 {{item.content}} 6 7 </li> 8 9 </ul>

?

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>ng-repeat 指令</title> 7 <style> 8 .red { 9 color: red; 10 } 11 12 .green { 13 color: green; 14 } 15 </style> 16 </head> 17 18 <body ng-app="myApp"> 19 <input type="text" ng-model="lastname"> 20 <ul ng-controller="ListController"> 21 <li ng-repeat="name in students track by $id($index)" ng-class="{red:lastname!=''&&name.startsWith(lastname)}">{{name}}</li> 22 </ul> 23 <script src="bower_components/angular/angular.js"></script> 24 <script> 25 angular.module('myApp', []) 26 .controller('ListController', ['$scope', function($scope) { 27 28 29 $scope.students = ['鄧樂', '趙四', '王明', '張曉', '李三', '李三']; 30 31 32 }]); 33 </script> 34 </body> 35 36 </html>

?

5、ng-show/ng-hide 指令

ng-show/ng-hide指令會根據屬性值去確定是否展示當前元素，例如ng-show=false則不會展示該元素

1 <ul class="messages"> 2 3 <li ng-repeat="item in messages track by $index" ng-show="item.read"> 4 5 {{item.content}} 6 7 </li> 8 9 </ul>

6、ng-if是指是否存在DOM元素

7、ng-link/ng-src 指令

ng-link/ng-src指令用于解決當鏈接類型的數據綁定時造成的加載BUG，如

1  2 3 <img src="{{item.url}}"> 4 5  6 7 <img ng-src="{{item.url}}"> 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>ng-src</title> 7 <script src="bower_components/angular/angular.js"></script> 8 </head> 9 10 <body ng-app ng-init="imgUrl='22.png'" ng-cloak> 11 <img ng-src="{{imgUrl}}" alt=""> 12 13 <a ng-href="{{imgUrl}}">跳轉到圖片</a> 14 </body> 15 16 </html>

8、ng-switch

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>ng-switch 指令</title> 6 </head> 7 <body ng-app> 8 <select ng-model="selected"> 9 <option value="1">1</option> 10 <option value="2">2</option> 11 <option value="3">3</option> 12 </select> 13 <div ng-switch="selected"> 14 <div ng-switch-when="1"> 15 你選擇的是1 16 </div> 17 <div ng-switch-when="2"> 18 你選擇的是2 19 </div> 20 <div ng-switch-when="3"> 21 你選擇的是3 22 </div> 23 <div ng-switch-default> 24 你什么都沒選 25 </div> 26 </div> 27 28 <script src="bower_components/angular/angular.js"></script> 29 </body> 30 </html>

9、ng-checked

ng-checked 和 ng-selected 只會做數據到視圖的同步，不會做視圖到數據的同步

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>ng-xxx 其他指令</title> 7 </head> 8 9 <body ng-app> 10 <p> 11 <input type="checkbox" ng-model="checked">全選/取消全選</p> 12 <ul> 13  14 <li>選項01 15 <input type="checkbox" ng-checked="checked"> 16 </li> 17 <li>選項02 18 <input type="checkbox" ng-checked="checked"> 19 </li> 20 <li>選項03 21 <input type="checkbox" ng-checked="checked"> 22 </li> 23 <li>選項04 24 <input type="checkbox" ng-checked="checked"> 25 </li> 26 <li>選項05 27 <input type="checkbox" ng-checked="checked"> 28 </li> 29 </ul> 30 <script src="bower_components/angular/angular.js"></script> 31 </body> 32 33 </html>

10、其他常用指令

ng-model

ng-class

ng-show/ng-hide/ng-if

ng-click

ng-link/ng-src

11、自定義指令

AngularJS中可以通過代碼自定義指令：

1 myModule.directive('hello', function() { 2 3 return { 4 5 restrict: 'E', 6 7 template: '<h1>Hello world</h1>', 8 9 replace: true 10 11 }; 12 13 }); 14 15 myApp.directive("ngHover", function() { 16 17 return function(scope, element, attrs) { 18 19 element.bind("mouseenter", function() { 20 21 element.css("background", "yellow"); 22 23 }); 24 25 element.bind("mouseleave", function() { 26 27 element.css("background", "none"); 28 29 }); 30 31 } 32 33 });

轉載于:https://www.cnblogs.com/le220/p/8709587.html

總結

以上是生活随笔為你收集整理的第215天：Angular---指令的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： POJ-1201 Intervals--
下一篇： Fragment专辑（一）：Fragme