AngularJS 指令:
[ng-app]
定义应用程序的根元素。
[ng-bind]
绑定 HTML 元素到应用程序数据
[ng-bind-html]
绑定 HTML 元素的 innerHTML 到应用程序数据，并移除 HTML 字符串中危险字符
[ng-bind-template]
规定要使用模板替换的文本内容
[ng-blur]
规定 blur 事件的行为
[ng-change]
规定在内容改变时要执行的表达式
[ng-checked]
规定元素是否被选中
[ng-class]
指定 HTML 元素使用的 CSS 类
[ng-class-even]
类似 ng-class，但只在偶数行起作用
[ng-class-odd]
类似 ng-class，但只在奇数行起作用
[ng-click]
定义元素被点击时的行为
[ng-cloak]
在应用正要加载时防止其闪烁
[ng-controller]
定义应用的控制器对象
[ng-copy]
规定拷贝事件的行为
[ng-csp]
修改内容的安全策略
[ng-cut]
规定剪切事件的行为
[ng-dblclick]
规定双击事件的行为
[ng-disabled]
规定一个元素是否被禁用
[ng-focus]
规定聚焦事件的行为
ng-form指定 HTML 表单继承控制器表单
[ng-hide]
隐藏或显示 HTML 元素
[ng-href]
为 a 元素指定链接
[ng-if]
如果条件为 false 移除 HTML 元素
[ng-include]
在应用中包含 HTML 文件
[ng-init]
定义应用的初始化值
[ng-jq]
定义应用必须使用到的库，如：jQuery
[ng-keydown]
规定按下按键事件的行为
[ng-keypress]
规定按下按键事件的行为
[ng-keyup]
规定松开按键事件的行为
[ng-list]
将文本转换为列表 (数组)
[ng-model]
绑定 HTML 控制器的值到应用数据
[ng-model-options]
规定如何更新模型
[ng-mousedown]
规定按下鼠标按键时的行为
[ng-mouseenter]
规定鼠标指针穿过元素时的行为
[ng-mouseleave]
规定鼠标指针离开元素时的行为
[ng-mousemove]
规定鼠标指针在指定的元素中移动时的行为
[ng-mouseover]
规定鼠标指针位于元素上方时的行为
[ng-mouseup]
规定当在元素上松开鼠标按钮时的行为
[ng-non-bindable]
规定元素或子元素不能绑定数据
[ng-open]
指定元素的 open 属性
[ng-options]
在 <select> 列表中指定 <options>
[ng-paste]
规定粘贴事件的行为
[ng-pluralize]
根据本地化规则显示信息
[ng-readonly]
指定元素的 readonly 属性
[ng-repeat]
定义集合中每项数据的模板
[ng-selected]
指定元素的 selected 属性
[ng-show]
显示或隐藏 HTML 元素
[ng-src]
指定 img 元素的 src 属性
[ng-srcset]
指定 img 元素的 srcset 属性
[ng-style]
指定元素的 style 属性
[ng-submit]
规定 onsubmit 事件发生时执行的表达式
[ng-switch]
规定显示或隐藏子元素的条件
[ng-transclude]
规定填充的目标位置
[ng-value]
规定 input 元素的值
创建自定义的指令
除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, 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.上面这种，感觉更清晰明确一点。
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.还有指令配置项的：link controller等在项目运用中有遇到过：
angular.module('myApp', []).directive('first', [ function(){
return {
// scope: false, // 默认值，共享父级作用域
// 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, // 继承父级作用域并创建指令自己的作用域
// controller: function($scope, $element, $attrs, $transclude) {},
restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
//当修改这里的name时，second会在自己的作用域中新建一个name变量，与父级作用域中的
// name相对独立，所以再修改父级中的name对second中的name就不会有影响了
template: 'second name:{{name}}',
};
}]).directive('third', [ function(){
return {
scope: {}, // 创建指令自己的独立作用域，与父级毫无关系
// 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";
}]);
限制使用
你可以限制你的指令只能通过特定的方式来调用。
通过添加 restrict 属性,并设置只值为 "A", 来设置指令只能通过属性的方式来调用:
var app = angular.module("myApp", []);
app.directive("runoobDirective", function() {
return {
restrict : "A",
template : "<h1>自定义指令!</h1>"
};
});
网友评论