AngularJS（五）——指令
发布时间：2020-12-17 10:10:57 所属栏目：安全 来源：网络整理
导读：一、自定义指令： zhiling.html span style="font-size:18px;"!doctype htmlhtml ng-app="myApp"headscript src="js/angular-1.3.0.js"/scriptscript src="zhiling.js"/script/headmy-directive/my-directive/span zhiling.js span style="font-size:18px;"a
一、自定义指令：
zhiling.html
<span style="font-size:18px;"><!doctype html> <html ng-app="myApp"> <head> <script src="js/angular-1.3.0.js"></script> <script src="zhiling.js"></script> </head> <my-directive></my-directive></span>
zhiling.js
<span style="font-size:18px;">angular.module('myApp',[])
.directive('myDirective',function() {
return {
restrict: 'E',template: '<a href="http://google.com">Click me to go to Google</a>'
};
});</span>
效果图：
html:
<span style="font-size:18px;"><!doctype html> <html ng-app="myApp"> <head> <script src="js/angular-1.3.0.js"></script> <script src="zhiling.js"></script> </head> <div my-directive my-url="http://baidu.com" my-link-text="Click me to go to baidu"></div> </html></span>
js:
<span style="font-size:18px;">angular.module('myApp',function() {
return {
restrict: 'A',replace: true,scope: {
myUrl: '@',//绑定策略
myLinkText: '@' //绑定策略
},template: '<a href="{{myUrl}}">' +
'{{myLinkText}}</a>'
};
});</span>
我们在作用域对象内部把 someProperty 值设置为 @ 这个绑定策略。这个绑定策略告诉AngularJS将DOM中 some-property 属性的值复制给新作用域对象中的 someProperty 属性,默认情况下约定DOM属性和JavaScript中对象属性的名字是一样的（除非对象的属性名采用的是驼峰式写法） 。
指令详解<span style="font-size:18px;">angular.module('myApp',[])
.directive('myDirective',function() {
return {
restrict: String,priority: Number,terminal: Boolean,template: String or Template Function:
function(tElement,tAttrs) (...},templateUrl: String,replace: Boolean or String,scope: Boolean or Object,transclude: Boolean,controller: String or
function(scope,element,attrs,transclude,otherInjectables) { ... },controllerAs: String,require: String,link: function(scope,iElement,iAttrs) { ... },compile: // 返回一个对象或连接函数，如下所示：
function(tElement,tAttrs,transclude) {
return {
pre: function(scope,iAttrs,controller) { ... },post: function(scope,controller) { ... }
}
// 或者
return function postLink(...) { ... }
}
};
});</span>
directive() 方法可以接受两个参数：
1. name （字符串）
指令的名字，用来在视图中引用特定的指令。
2. factory_function （函数）
这个函数返回一个对象， 其中定义了指令的全部行为。 $compile 服务利用这个方法返回的对象，在DOM调用指令时来构造指令的行为。
restrict(字符串)
可选值如下：
E（元素）
<my-directive></my-directive>
A（属性，默认值）
<div my-directive="expression"></div>
C（类名）
<div class="my-directive:expression;"></div>
M（注释）
<--directive:my-directive expression-->
这些选项可以单独使用，也可以混合在一起使用：
angular.module('myDirective',function(){
return {
restrict: 'EA' // 输入元素或属性
};
});
无论有多少种方式可以声明指令， 我们坚持使用属性方式， 因为它有比较好的跨浏览器兼容性：
template(字符串函数）
template 参数是可选的，必须被设置为以下两种形式之一：
1、 一段HTML文本；
2、 一个可以接受两个参数的函数，参数为 tElement 和 tAttrs ，并返回一个代表模板的字符
串。 tElement 和 tAttrs 中的 t 代表 template ，是相对于 instance 的。
priority优先级
优先级参数可以被设置为一个数值。大多数指令会忽略这个参数，使用默认值0。
terminal （布尔型）
这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令。但同当前指令优先级相同的指令还是会被执行。
templateUrl （字符串或函数）
一个代表外部HTML文件路径的字符串
一个可以接受两个参数的函数，参数为 tElement 和 tAttrs ，并返回一个外部HTML文件路径的字符串。
replace （布尔型）
replace 是一个可选参数，如果设置了这个参数，值必须为 true ，因为默认值为 false 。默认值意味着模板会被当作子元素插入到调用此指令的元素内部。
scope 参数（布尔型或对象）
scope 参数是可选的，可以被设置为 true 或一个对象。默认值是 false 。
当 scope 设置为 true 时，会从父作用域继承并创建一个新的作用域对象。
controllerAs （字符串）
controllerAs 参数用来设置控制器的别名， 可以以此为名来发布控制器， 并且作用域可以访问 controllerAs 。这样就可以在视图中引用控制器，甚至无需注入 $scope
其它的项目中用到再查吧。
二、内置指令
内置指令是打包在AngularJS内部的指令。所有内置指令的命名空间都使用 ng 作为前缀。为了防止命名空间冲突，不要在自定义指令前加 ng 前缀。
布尔属性
1、ng-disabled
使用 ng-disabled 可以把 disabled 属性绑定到以下表单输入字段上：
<input>(text 、 checkbox 、 radio 、 number 、 url,email 、 submit ） ；
<textarea>;
<select>;
<button>。
在下面的例子中按钮会一直禁用，直到用户在文本字段中输入内容：
<input type="text" ng-model="someProperty" placeholder="TypetoEnable">
<button ng-model="button" ng-disabled="!someProperty">AButton</button>
2、ng-readonly
<input type="text" ng-model="someProperty"><br/>
<input type="text"ng-readonly="!someProperty"value="Some text here"/> //只读
3、ng-checked
标准的 checked 属性是一个布尔属性，不需要进行赋值。通过 ng-checked 将某个表达式同是否出现 checked 属性进行绑定。
同 ng-checked 绑定在一起，AngularJS会输出标准的HTML checked 属性，这样默认会把复选框
<label>someProperty = {{someProperty}}</label>
<input type="checkbox"
ng-checked="someProperty"
ng-init="someProperty = true"
ng-model="someProperty">
4、ng-selected
ng-selected 可以对是否出现 option 标签的 selected 属性进行绑定：
<label>Select Two Fish:</label>
<input type="checkbox"
ng-model="isTwoFish"><br/>
<select>
<option>One Fish</option>
<option ng-selected="isTwoFish">Two Fish</option>
</select>
类布尔属性
1、ng-href
当使用当前作用域中的属性动态创建URL时，应该用 ng-href 代替 href
<!-- 当 href 包含一个 {{expression}}时总是使用 ng-href -->
<a ng-href="{{ myHref }}">I'm feeling lucky,when I load</a>
<!-- 用户单击之前，href不会加载 -->
<a href="{{ myHref }}">I'm feeling 404</a>
2、ng-src
向指令中使用子作用域
1、ng-app
任何具有 ng-app 属性的DOM元素将被标记为 $rootScope 的起始点。
$rootScope 是作用域链的起始点，任何嵌套在 ng-app 内的指令都会继承它。
2、ng-controller
内置指令 ng-controller 的作用是为嵌套在其中的指令创建一个子作用域，避免将所有操作和模型都定义在 $rootScope 上。用这个指令可以在一个DOM元素上放置控制器。
3、ng-include
使用 ng-include 可以加载、编译并包含外部HTML片段到当前的应用中。
4、ng-switch
这个指令和 ng-switch-when 及 on="propertyName" 一起使用，可以在 propertyName 发生变化时渲染不同指令到视图中。在下面的例子中，当 person.name 是Ari时，文本域下面的 div 会显示出来，并且这个人会获得胜利：
<input type="text" ng-model="person.name"/>
<div ng-switch on="person.name">
<p ng-switch-default>And the winner is</p>
<h1 ng-switch-when="Ari">{{ person.name }}</h1>
</div>
5、ng-view
ng-view 指令用来设置将被路由管理和放置在HTML中的视图的位置。
6、ng-if
使用 ng-if 指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果赋值给 ng-if的表达式的值是 false ，那对应的元素将会从DOM中移除，否则对应元素的一个克隆将被重新插入DOM中。
7、ng-repeat
ng-repeat 用来遍历一个集合或为集合中的每个元素生成一个模板实例。集合中的每个元素都会被赋予自己的模板和作用域。同时每个模板实例的作用域中都会暴露一些特殊的属性。
$index ：遍历的进度（0... length-1 ） 。
$first ：当元素是遍历的第一个时值为 true 。
$middle ：当元素处于第一个和最后元素之间时值为 true 。
$last ：当元素是遍历的最后一个时值为 true 。
$even ：当 $index 值是偶数时值为 true 。
$odd ：当 $index 值是奇数时值为 true 。
8、ng-init
ng-init 指令用来在指令被调用时设置内部作用域的初始状态
<div ng-init="greeting='Hello';person='World'">
{{greeting}} {{person}}
</div>
9、{{ }}
{{ }} 语法是AngularJS内置的模板语法，它会在内部 $scope 和视图之间创建绑定。基于这个绑定，只要 $scope 发生变化，视图就会随之自动更新。
事实上它也是指令，虽然看起来并不像，实际上它是 ng-bind 的简略形式，用这种形式不需要创建新的元素，因此它常被用在行内文本中。
注意，在屏幕可视的区域内使用 {{ }} 会导致页面加载时未渲染的元素发生闪烁，用 ng-bind可以避免这个问题。
10、ng-bind
尽管可以在视图中使用 {{ }} 模板语法（AngularJS内置的方式） ，我们也可以通过 ng-bind指令实现同样的行为。
<body ng-init="greeting='HelloWorld'">
<p ng-bind="greeting"></p>
</body>
11、ng-cloak
除使用 ng-bind 来避免未渲染元素闪烁，还可以在含有 {{ }} 的元素上使用 ng-cloak 指令：
<body ng-init="greeting='HelloWorld'">
<p ng-cloak>{{ greeting }}</p>
</body>
12、ng-bind-template
同 ng-bind 指令类似， ng-bind-template 用来在视图中绑定多个表达式。
<div
ng-bind-template="{{message}}{{name}}">
</div>
13、ng-model
ng-model 指令用来将 input 、 select 、 text area 或自定义表单控件同包含它们的作用域中的属性进行绑定。
14、ng-show/ng-hide
ng-show 和 ng-hide 根据所给表达式的值来显示或隐藏HTML元素。当赋值给 ng-show 指令的值为 false 时元素会被隐藏。
15、ng-change
这个指令会在表单输入发生变化时计算给定表达式的值。因为要处理表单输入，这个指令要和 ngModel 联合起来使用可以给它绑定一个函数
16、ng-form
17、ng-click
ng-click 用来指定一个元素被点击时调用的方法或表达式
18、ng-select
ng-select 用来将数据同HTML的 <select> 元素进行绑定。这个指令可以和 ng-model 以及ng-options 指令一同使用，构建精细且表现优良的动态表单。
ng-options 的值可以是一个内涵表达式（comprehension expression） ，其实这只是一种有趣的说法，简单来说就是它可以接受一个数组或对象，并对它们进行循环，将内部的内容提供给select 标签内部的选项
19、ng-submit
ng-submit 用来将表达式同 onsubmit 事件进行绑定。这个指令同时会阻止默认行为（发送请求并重新加载页面） ，除非表单不含有 action 属性
20、ng-class
使用 ng-class 动态设置元素的类，方法是绑定一个代表所有需要添加的类的表达式。重复的类不会添加。当表达式发生变化，先前添加的类会被移除，新类会被添加。
三、总结
这些指令还要在实践应用才能数量掌握。
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |