目录
一、 基础的几个指令:
二、directive的参数详解:
restrict:String
priority:number
terminal: Boolean
replace:Boolean
Scope(重要)
1. scope为false
2. scope为true
3. scope:{ } 隔离的scope
接触angular的第五天,把前几天的学习内容记录下来
一、 基础的几个指令:
ng-app 指令初始化一个 AngularJS 应用程序。
ng-init 指令初始化应用程序数据。
ng-model 指令把元素值(比如输入域的值)绑定到应用程序。
ng-repeat指令对于集合中(数组中)的每个项会克隆一次 HTML 元素。
以上具体用法不再赘述,可以参考菜鸟教程:https://www.runoob.com/angularjs/angularjs-directives.html
顺便说一句:
开始分不清使用Angular变量时什么时候用$scope.xxx什么时候使用双大括号{{xxx}}、和xxx
总结:在js控制器里面使用$scope.xxx,在html里面的angular相关的属性(比如带ng的各种指令)可以直接使用xxx,例如:ng-init="xxx",而作为html元素就需要使用两个花括号例如:<div class="{{xxx}}"></div>、<h1>{{xxx}}</h1>
2. 自定义指令的基础用法
使用驼峰法来命名一个指令, myDirective, 但在使用它时需要以 - 分割, my-directive
<body ng-app="myApp">
<my-directive></my-directive> //作为元素名使用,restrict : "E"
<div my-directive></div> //作为属性使用,restrict : "A"
<div class="my-directive"></div> //作为类名使用,restrict : "C"
<!-- directive: my-directive --> //作为注释使用,restrict : "M"
<script>
var app = angular.module("myApp", []);
app.directive("myDirective", function() {
return {
restrict : "A",
priority: 1,
template : "<div>自定义指令</div>"
};
});
</script>
</body>
二、directive的参数详解:
restrict:String
//可选字符串参数,可以设置这个指令在DOM中可以何种形式被声明,
默认为A(attr(当做标签属性来使用))<div my-directive></div>
设置为“E”(ele,(直接当做标签来使用)) <my-directive></my-directive>
C(类名)<div class="my-directive:expression;"></div>
M(注释)<--directive:my-directive expression-->
这些选项可以单独使用,也可以混合在一起使用:
angular.module('myDirective', function(){
return {
restrict: 'EA'
};
})
priority:number
默认为0,当有多个directive定义在同一个DOM元素时,有时需要明确它们的执行顺序。这属性用于在directive的compile function调用之前进行排序。如果优先级相同,则执行顺序是不确定的。ngRepeat的优先级为1000,这样就可以保证在同一元素上,它总是在其他指令之前被调用。
terminal: Boolean
true或false,如果为false,则这个参数用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令。优先级相同的指令还是会被执行。 ngIf 的优先级略高于 ngView
replace:Boolean
设置加载template/templateUrl时, 对directive自身这个标签的处理
false: 默认值, 保留这个标签的html代码
true: 用template/templateUrl的内容替换个这个directive标签
<div my-directive></div>
app.directive("myDirective", function() {
return {
replace: true,
template: '<div>hi</div>'
};
});
replace为true结果为:
<div>hi</div>
replace为false的话就是
<div my-directive>
<div>hi</div>
</div>
Scope(重要)
这里着重说下scope。控制器的 $scope 相当于作用域、控制范围,用来保存AngularJS Model(模型)的对象。directive里面的scope分为三种用法:
1. scope为false
默认值, 会影响父scope。
不创建自己的scope,和父级使用一个scope,scope里面所有的内容都可以使用,父级和这里改动哪个都会改变,因为是同一个scope,比较危险
app.directive("myDirective", function() {
return {
restrict: 'E',
template: '<div>hi</div>',
scope: false
};
});
2. scope为true
创建自己的scope并继承父级的内容。
内部在修改变量之前,会保持和父作用域变量一致,改变父级的内容它会跟着改变,而在内部修改变量之后就不再跟父级保持同步了
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyM0ADOzgjM3ETNxgDM2EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
3. scope:{ } 隔离的scope
创建一个空的scope,不依赖父级作用,但仍可与父scope通信
这种隔离开的scope比较常用,可以通过=、@、&三种方式绑定父级的元素
① 使用“@”单向绑定变量,外部scope能够影响内部scope,但内部不影响外部。写法:
app.directive('myDirective', function () {
return {
restrict: 'E',
replace: true,
template: '<input type="text" ng-model="myName">',
scope: {
myName: '@'
//这里名字使用驼峰命名,在html使用时也要像directive的名字一样使用-分隔开
}
}
});
<!--外部-->
<input type="text" ng-model="name">
<!--内部-->
<!--在自定义directive里面写上属性,属性名是我们的scope里面的,引用值是外面的,这种的外部会影响里面的,但里面的不会影响外面的-->
<my-directive my-name="{{name}}"></my-directive>
②使用“=”双向绑定,外部内部改变另一个都会被改变
在html使用时应注意不要使用双大括号绑定
app.directive('myDirective', function () {
return {
restrict: 'E',
replace: true,
template: '<input type="text" ng-model="myName">',
scope: {
myName: '=' //双向绑定
}
}
});
<!--html代码->
<!--注意这里不要写双大括号-->
<my-directive my-name="name"></my-directive>
③使用“&”使用父级的函数
<div my-directive my-test-func="testFunc()"></div>
app.directive('myDirective', function () {
return {
restrict: 'E',
scope: {
myTestFunc: '&' //使用函数
}
}
});
下次记录angular的三种注入方式、http请求