angularjs——directive_angularjs应用在加载时,文档可能会由于代码未加载完而显示angularjs代码,进而-CSDN博客

本文链接：https://blog.csdn.net/a617332635/article/details/73276152

自定义的指令常用的属性如下：

<!DOCTYPE html>
<html ng-app="test">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.angularjs.org/1.2.3/angular.min.js"></script>
<script type="text/javascript">
var app=angular.module("test",[]);
app. directive (" hello ",function(){
return {
restrict: ' ACEM ',
template :function(){
return " <button ng-click='fn()'>click me</button> ";
},
terminal :true,
replace :true,
scope :true,
link :function( scope,elements,attrs ){
elements.bind('click', function () {
elements.css('background-color','blue');
})
},
transclude :true,
compile :function(){
return function( scope,elements,attrs ){
elements.bind('click', function () {
elements.css('background-color','red');
scope.$apply(function () {
scope.color='pink';
})
})
}
},
controller: function ($scope, $compile, $http) {
$scope.fn= function () {
alert('hello');
};
}
}
});
</script>
</head>
<body>
<hello></hello>
</body>

</html>

{

1.restrict：ACEM （字符串）可选参数，指明指令在DOM里面以什么形式被声明；

取值有：E(元素),A(属性),C(类),M(注释)，

2.template：function(){return string}   字符串或者函数）可选参数

3.terminal：boolean （布尔型），可选参数，可以被设置为true或false，

若设置为true，则优先级低于此指令的其他指令则无效，不会被调用(优先级相同的还是会执行)

4.replace：boolean   布尔值），默认值为false，设置为true时候，replace为true时，hello这个标签不在了，反之，则存在

5.scope：boolean

（1）默认值false。表示继承父作用域;

（2）true。表示继承父作用域，并创建自己的作用域（子作用域）;

（3）{}。表示创建一个全新的隔离作用域；

6.link：function(scope,elements,attrs)

7.transclude：boolean

8.compile：function(){return function(scope,elements,attrs)}

9.controller：function ($scope, $compile, $http) 可以是一个字符串或者函数。

另外还有一些特殊的服务（参数）可以注入

（1）$scope，与指令元素相关联的作用域

（2）$element，当前指令对应的元素

（3）$attrs，由当前元素的属性组成的对象

（4）$transclude，嵌入链接函数，实际被执行用来克隆元素和操作DOM的函数

10.templateUrl:HTML模板

11.priority (数字)，可选参数，指明指令的优先级，若在单个DOM上有多个指令，则优先级高的先执行

12.templateUrl（字符串或者函数），可选参数 ,可以是

代表HTML文件路径的字符串或一个函数，可接受两个参数tElement和tAttrs

13.require 字符串代表另一个指令的名字，它将会作为link函数的第四个参数

}

1、ng-app指令：

告诉 AngularJS 应用当前这个元素是根元素。所有AngularJS应用都必须要要一个根元素。HTML文档中只允许有一个ng-app指令，如果有多个 ng-app 指令，则只有第一个会被使用，它的值是指定载应用模块的名称。

2、ng-controller指令：

用于为你的应用添加控制器。在控制器中，你可以编写代码，制作函数和变量，并使用scope对象来访问。

3、ng-model指令：

绑定了HTML表单元素到scope变量中。如果scope中不存在变量, 将会创建它。一般是用在input表单中改变value值用做双向数据绑定。

4、ng-bind指令：

告诉AngularJS使用给定的变量或表达式的值来替换HTML元素的内容。如果给定的变量或表达式修改了，指定替换的HTML元素也会修改。

以上4个指令的初次使用场景： AngularJs简介、指令、表达式及其作用。

5、ng-click指令：

告诉AngularJS，HTML元素被点击后需要执行的操作。

实例：AngularJS中$scope的基本使用方法

6、ng-cloak指令：

用于在AngularJS应用在加载时防止AngularJS代码未加载完而出现的问题。

AngularJS应用在加载时，文档可能会由于AngularJS代码未加载完而出现显示AngularJS代码，进而会有闪烁的效果，ng-cloak指令是为了防止该问题的发生。

实例：AngularJs表达式与ng-bind及ng-cloak解决闪屏问题解决方案。

7、ng-value指令：

用于设置input 或select元素的 value 属性。

8、ng-show指令：

在表达式为true时显示指定的HTML元素，否则隐藏指定的HTML元素。

9、ng-true-value和ng-false-value指令：

可以自定义checkbox被选中或取消选中之后的value值，ng-true-value表示选中之后的value值，ng-false-value表示取消选中之后的value值。

10、ng-options指令：

循环读取scope对象中的json数据，将其逐条返回到select中的option。

实例：AngularJs中的双向向数据绑定(MVVM)与表单处理相关指令

11、ng-selected指令：

用于设置 <select> 列表中的 <option> 元素的 selected 属性。ng-selected 属性的表达式返回 true 则选项被选中。

1 

2 <select>

3     <option>请选择</option>

4     <option ng-value="user.sex" ng-selected="user.sex==1">男</option>

5     <option ng-value="user.sex" ng-selected="user.sex==2">女</option>

6 </select>

7 <input type="radio" name="sex" ng-model="user.sex" ng-value="1" />男

8 <input type="radio" name="sex" ng-model="user.sex" ng-value="2" />女

1 var m = angular.module('app', []);

2     m.controller('ctrl', ['$scope', function($scope){

3         $scope.user = {'sex':1};

4     }]);

12、ng-disabled指令：

设置表单输入字段的 disabled 属性(input, select, 或 textarea)。如果 ng-disabled 中的表达式返回 true 则表单字段将被禁用。

1 

2 <input type="checkbox" ng-model="copyright" />

3 <input type="submit" ng-disabled="!copyright"/>

13、ng-readonly指令：

用于设置表单域(input 或 textarea) 的 readonly 属性。如果 ng-readonly 属性的表达式返回 true 则表单域为只读。

1 

2 <input type="text" ng-readonly="user.sex" />

3 <input type="text" ng-disabled="user.sex" />

14、ng-model-options指令：

绑定了 HTML 表单元素到 scope 变量中，你可以指定绑定数据触发的时间，或者指定等待多少毫秒。

实例：AngularJs使用ng-model-options设置数据同步时机提高网站性能

15、ng-checked指令：

用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性。如果 ng-checked 属性返回 true，复选框(checkbox)或单选按钮(radio)将会被选中。

实例：AngularJs使用ng-checked一步实现全选或取消功能

16、ng-class指令：、

用于给 HTML 元素动态绑定一个或多个 CSS 类。ng-class 指令的值可以是字符串，对象，或一个数组。

如果是字符串，多个类名使用空格分隔；

如果是对象，需要使用 key-value 对，key 为你想要添加的类名，value 是一个布尔值。只有在 value 为 true 时类才会被添加；

如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。

实例：AngularJs通过ng-class动态改变样式类实例操作

17、ng-style指令：

为 HTML 元素添加 style 属性。ng-style 属性值必须是对象，表达式返回的也是对象。对象由 CSS 属性和值注册，即 key=>value 对。

实例：AngularJS使用ng-style动态改变样式

18、事件指令总结：

实例：AngularJs的事件处理指令详解