AngularJS（五）——指令

一、自定义指令：

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', [])
	.directive('myDirective', 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, iElement, iAttrs, controller) { ... },
					post: function(scope, iElement, iAttrs, 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 动态设置元素的类，方法是绑定一个代表所有需要添加的类的表达式。重复的类不会添加。当表达式发生变化，先前添加的类会被移除，新类会被添加。

三、总结

这些指令还要在实践应用才能数量掌握。

时间： 2024-08-04 16:14:17

AngularJS（五）——指令的相关文章

学习AngularJs:Directive指令用法（完整版）

这篇文章主要学习AngularJs:Directive指令用法,内容很全面,感兴趣的小伙伴们可以参考一下 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ AngularJs下载地址:https://angularjs.org/ 摘要:Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或LASS属性或ATTR属性,并

AngularJS之指令

紧接上篇博客“初探AngularJS” 一.前言 在AngularJS中指令尤为重要且内容庞多,固单独提炼出来,梳理一番.如有错误,请不吝讲解. 好了,言归正传,让我们一起走进Angular指令的世界. 在上篇博客的前言部分提到,Angular的核心就是对HTML标签的增强.我们用到的诸如ng-app.ng-controller等等这些都是属于Angular指令,具体点,它们为Angular内置的指令. Angular不仅提供了内置指令,它还允许我们自定义指令,不然Angular就太low咯.

angularjs自定义指令绑定策略---‘&’绑定

接着上一篇 理解了"="和"@"绑定之后再来理解"&"绑定,就很简单了,同理,用"桥梁"进行分析,但还是有一些例外的情况,要不然angularjs也不会单独设定一个绑定策略,看案例先: <!DOCTYPE html><html lang="en" ng-app="MyModule"><head>    <meta charset=&quo

AngularJS: 自定义指令与控制器数据交互

<!doctype html> <html> <head> <meta charset="utf-8"> <title>AngularJS自定义指令与控制器数据交互</title> <!-- <script src="http://cdn.bootcss.com/angular.js/1.3.15/angular.js"></script>--> <sc

Angularjs 事件指令 input 相关指令 和样式指令 DOM 操作指令详解

Angularjs 事件指令 input 相关指令 和样式指令DOM 操作指令详解学习要点:1. AngularJs 事件指令2. input 相关指令3. 样式指令4. DOM 操作指令5. ngBind/ngBindHtml/ngBindTemplate 重点6. ng-init ng-mode ng-model-options ng-controler 1. Angularjs 事件指令自己研究:ng-click/dbclickng-mousedown/upng-mouseenter/le

【js类库AngularJs】学习angularJs的指令（包括常见表单验证，隐藏等功能）

[js类库AngularJs]学习angularJs的指令(包括常见表单验证,隐藏等功能) AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的 是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入.等等. 参考资料: angularjs中文网:http://www.apjs.net/ angularjs官网:http://angula

AngularJS ng-model 指令

AngularJS ng-model 指令 ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值. <div ng-app="myApp" ng-controller="myCtrl">名字: <input ng-model="name"></div><script>var app = angular.module('myApp', [

跟我学AngularJs:Directive指令用法解读（下）

此文接 跟我学AngularJs:Directive指令用法解读(上) 8.transclude 如果不想让指令内部的内容被模板替换,可以设置这个值为true.一般情况下需要和ngTransclude指令一起使用. 比如:template:"<div>hello every <div ng-transclude></div></div>",这时,指令内部的内容会嵌入到ng-transclude这个div中.也就是变成了<div>

跟我学AngularJs:Directive指令用法解读（上）

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 本教程使用AngularJs版本:1.5.3 AngularJs GitHub: https://github.com/angular/angular.js/ AngularJs下载地址:https://angularjs.org/ 摘要: Directive(指令)笔者认为是AngularJ非常强大而有有用的功能之一.它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性

AngularJS 事件指令/input相关指令/样式指令/DOM操作指令详解

1.AngularJS 事件指令 (1)ng-click 鼠标点击事件 [html] <button ng-click="count = count + 1" ng-init="count=0"> Increment  </button> <span>  count: {{count}}  </span> (2)ng-dblclick 鼠标双击事件 [html] <button ng-dblclick="