AngularJS-指令command

標籤：技術   dir   ever   url   name   amp   rest   多個   everyone   

directive：

匹配模式restrict:‘AEMC‘預設為A

template

templateUrl

templateCache:把模板緩衝起來，共多個指令使用

var myModule = angular.module("MyModule", []);//注射器載入完所有模組時，此方法執行一次myModule.run(function($templateCache){    $templateCache.put("hello.html","<div>Hello everyone!!!!!!</div>");});myModule.directive("hello", function($templateCache) {    return {        restrict: ‘AECM‘,        template: $templateCache.get("hello.html"),        replace: true    }});

 

replace：

transclude:指令互相嵌套

獨立scope

scope：{}

var myModule = angular.module("MyModule", []);myModule.directive("hello", function() {    return {        restrict: ‘AE‘,        scope:{},        template: ‘<div><input type="text" ng-model="userName"/>{{userName}}</div>‘,        replace: true    }});

繫結原則

 內建指令63：

 

compile&&link：

載入angular.js，找到ng-app指令，確定應用邊界

遍曆DOM，找到所有指令

根據指令代碼的template，replace，transclue轉換DOM結構

串連階段

對每一條指令運行link函數

link函數一般用來操作DOM、綁定事件監聽器。

 

AngularJS-指令command