AngularJS 指令:
[ng-app]
定義應(yīng)用程序的根元素。
[ng-bind]
綁定 HTML 元素到應(yīng)用程序數(shù)據(jù)
[ng-bind-html]
綁定 HTML 元素的 innerHTML 到應(yīng)用程序數(shù)據(jù)，并移除 HTML 字符串中危險(xiǎn)字符
[ng-bind-template]
規(guī)定要使用模板替換的文本內(nèi)容
[ng-blur]
規(guī)定 blur 事件的行為
[ng-change]
規(guī)定在內(nèi)容改變時(shí)要執(zhí)行的表達(dá)式
[ng-checked]
規(guī)定元素是否被選中
[ng-class]
指定 HTML 元素使用的 CSS 類
[ng-class-even]
類似 ng-class，但只在偶數(shù)行起作用
[ng-class-odd]
類似 ng-class，但只在奇數(shù)行起作用
[ng-click]
定義元素被點(diǎn)擊時(shí)的行為
[ng-cloak]
在應(yīng)用正要加載時(shí)防止其閃爍
[ng-controller]
定義應(yīng)用的控制器對(duì)象
[ng-copy]
規(guī)定拷貝事件的行為
[ng-csp]
修改內(nèi)容的安全策略
[ng-cut]
規(guī)定剪切事件的行為
[ng-dblclick]
規(guī)定雙擊事件的行為
[ng-disabled]
規(guī)定一個(gè)元素是否被禁用
[ng-focus]
規(guī)定聚焦事件的行為
ng-form指定 HTML 表單繼承控制器表單
[ng-hide]
隱藏或顯示 HTML 元素
[ng-href]
為 a 元素指定鏈接
[ng-if]
如果條件為 false 移除 HTML 元素
[ng-include]
在應(yīng)用中包含 HTML 文件
[ng-init]
定義應(yīng)用的初始化值
[ng-jq]
定義應(yīng)用必須使用到的庫(kù)，如：jQuery
[ng-keydown]
規(guī)定按下按鍵事件的行為
[ng-keypress]
規(guī)定按下按鍵事件的行為
[ng-keyup]
規(guī)定松開(kāi)按鍵事件的行為
[ng-list]
將文本轉(zhuǎn)換為列表 (數(shù)組)
[ng-model]
綁定 HTML 控制器的值到應(yīng)用數(shù)據(jù)
[ng-model-options]
規(guī)定如何更新模型
[ng-mousedown]
規(guī)定按下鼠標(biāo)按鍵時(shí)的行為
[ng-mouseenter]
規(guī)定鼠標(biāo)指針穿過(guò)元素時(shí)的行為
[ng-mouseleave]
規(guī)定鼠標(biāo)指針離開(kāi)元素時(shí)的行為
[ng-mousemove]
規(guī)定鼠標(biāo)指針在指定的元素中移動(dòng)時(shí)的行為
[ng-mouseover]
規(guī)定鼠標(biāo)指針位于元素上方時(shí)的行為
[ng-mouseup]
規(guī)定當(dāng)在元素上松開(kāi)鼠標(biāo)按鈕時(shí)的行為
[ng-non-bindable]
規(guī)定元素或子元素不能綁定數(shù)據(jù)
[ng-open]
指定元素的 open 屬性
[ng-options]
在 <select> 列表中指定 <options>
[ng-paste]
規(guī)定粘貼事件的行為
[ng-pluralize]
根據(jù)本地化規(guī)則顯示信息
[ng-readonly]
指定元素的 readonly 屬性
[ng-repeat]
定義集合中每項(xiàng)數(shù)據(jù)的模板
[ng-selected]
指定元素的 selected 屬性
[ng-show]
顯示或隱藏 HTML 元素
[ng-src]
指定 img 元素的 src 屬性
[ng-srcset]
指定 img 元素的 srcset 屬性
[ng-style]
指定元素的 style 屬性
[ng-submit]
規(guī)定 onsubmit 事件發(fā)生時(shí)執(zhí)行的表達(dá)式
[ng-switch]
規(guī)定顯示或隱藏子元素的條件
[ng-transclude]
規(guī)定填充的目標(biāo)位置
[ng-value]
規(guī)定 input 元素的值
創(chuàng)建自定義的指令
除了 AngularJS 內(nèi)置的指令外，我們還可以創(chuàng)建自定義指令。
你可以使用 .directive 函數(shù)來(lái)添加自定義的指令。
要調(diào)用自定義指令，HTML 元素上需要添加自定義指令名。
使用駝峰法來(lái)命名一個(gè)指令， runoobDirective, 但在使用它時(shí)需要以 - 分割, runoob-directive:
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
template : "<h1>自定義指令!</h1>"
};
});
</script>
</body>
angular自定義指令的兩種寫法：
1.上面這種，感覺(jué)更清晰明確一點(diǎn)。
angular.module('myApp',[]).directive('zl1',[ function(){
return {
restrict:'AE',
template:'thirective',
link:function($scope,elm,attr,controller){
console.log("這是link");
},
controller:function($scope,$element,$attrs){
console.log("這是con");
}
};
}]).controller('Con1',['$scope',function($scope){
$scope.name="aliceqqq";
}]);
2.還有指令配置項(xiàng)的：link controller等在項(xiàng)目運(yùn)用中有遇到過(guò)：
angular.module('myApp', []).directive('first', [ function(){
return {
// scope: false, // 默認(rèn)值，共享父級(jí)作用域
// controller: function($scope, $element, $attrs, $transclude) {},
restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
template: 'first name:{{name}}',
};
}]).directive('second', [ function(){
return {
scope: true, // 繼承父級(jí)作用域并創(chuàng)建指令自己的作用域
// controller: function($scope, $element, $attrs, $transclude) {},
restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
//當(dāng)修改這里的name時(shí)，second會(huì)在自己的作用域中新建一個(gè)name變量，與父級(jí)作用域中的
// name相對(duì)獨(dú)立，所以再修改父級(jí)中的name對(duì)second中的name就不會(huì)有影響了
template: 'second name:{{name}}',
};
}]).directive('third', [ function(){
return {
scope: {}, // 創(chuàng)建指令自己的獨(dú)立作用域，與父級(jí)毫無(wú)關(guān)系
// controller: function($scope, $element, $attrs, $transclude) {},
restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
template: 'third name:{{name}}',
};
}])
.controller('DirectiveController', ['$scope', function($scope){
$scope.name="mike";
}]);
限制使用
你可以限制你的指令只能通過(guò)特定的方式來(lái)調(diào)用。
通過(guò)添加 restrict 屬性,并設(shè)置只值為 "A", 來(lái)設(shè)置指令只能通過(guò)屬性的方式來(lái)調(diào)用:
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "A",
template : "<h1>自定義指令!</h1>"
};
});