angularJS指令系統---Directive

標籤：code   首碼   src   put   var   範圍   button   boot   javascrip   

指令：Directive  

angularJS 有一套完整的，可拓展的，用來協助web應用開發的指令集；

在建立DOM期間，和HTML關聯著的指令會被檢測到，並被執行；

在angularJS中將首碼為 ng- 這種屬性稱之為指令，其作用就是為DOM元素調用方法，定義行為綁定資料等；

簡單說：當一個angular 應用啟動時，angular會遍曆DOM樹來解析HTML，根據指令不同，完成不同的操作；

指令屬性小提示：

ng-xxx 的屬性並不是標準中定義的屬性，很多情況下文法校正是無法通過的；

HTML5允許拓展（自製的）的屬性，以data- 開頭；

在angularJS中可以使用 data-ng- 來讓網頁對HTML有效（兩者效果都是一樣的）

<hrml ng-app><hrml data-ng-app>

 

ng-app指令：

ng-app 指令用來表明一個 angularJS 應用程式；

標記在一個 angularJS 的作用範圍在根對象上；

系統執行的時候會自動的執行根物件範圍內的指令；

可以在一個頁面建立多個 ng-app 節點（不推薦），原因：建立多個 ng-app 時，預設只能執行第一個，後面的需要進行手動引導：angular.bootstrap()

標記的範圍儘可能小，效能最佳化

 

多個 ng-app 的使用： 

<div ng-app="myAppOne" ng-controller="myAppOneController"><input type="button" value="按鈕一" ng-click="show()"></div><div ng-app="myAppTwo" ng-controller="myAppTwoController"><input type="button" value="按鈕二" ng-click="show()"></div></body><script type=‘text/javascript‘ src=‘bower_components/angular/angular.js‘></script><script type="text/javascript">var myAppOne = angular.module(‘myAppOne‘,[]);myAppOne.controller(‘myAppOneController‘,[‘$scope‘,function($scope){    $scope.show = function(){console.log(‘1‘);};}]);var myAppTwo = angular.module(‘myAppTwo‘,[]);myAppTwo.controller(‘myAppTwoController‘,[‘$scope‘,function($scope){    $scope.show = function(){console.log(‘2‘);};}]);//手動引導讓第二個div被myAppTwo管理angular.bootstrap(document.querySelector(‘[ng-app="myAppTwo"]‘),[‘myAppTwo‘]);//上面這種方法，可以解決，但是angularJS不推薦，推薦使用的是：//建立一個新模組，去管理其他的模組 接下來將ng-app="myApp"angular.module(‘myApp‘,[‘myAppOne‘],[‘myAppTwo‘]);</script>

 

angularJS指令系統---Directive