一、基础的几个指令：

二、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并继承父级的内容。

内部在修改变量之前，会保持和父作用域变量一致，改变父级的内容它会跟着改变，而在内部修改变量之后就不再跟父级保持同步了

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请求

Angular学习笔记——自定义指令directive参数详解相关推荐

JDBC学习笔记02【ResultSet类详解、JDBC登录案例练习、PreparedStatement类详解】
黑马程序员-JDBC文档(腾讯微云)JDBC笔记.pdf:https://share.weiyun.com/Kxy7LmRm JDBC学习笔记01[JDBC快速入门.JDBC各个类详解.JDBC之CR ...
我的学习笔记——CSS背景渐变(Gradients)详解
我的学习笔记--CSS背景渐变(Gradients)详解一.线性渐变(Linear Gradients) 1.语法 background-image: linear-gradient(directi ...
小猫爪：i.MX RT1050学习笔记26-RT1xxx系列的FlexCAN详解
i.MX RT1050学习笔记26-RT1xxx系列的FlexCAN详解 1 前言 2 FlexCAN简介 2.1 MB(邮箱)系统 2.1.1 正常模式下 2.1.2 激活了CAN FD情况下 2. ...
IP地址和子网划分学习笔记之《IP地址详解》
在学习IP地址和子网划分前,必须对进制计数有一定了解,尤其是二进制和十进制之间的相互转换,对于我们掌握IP地址和子网的划分非常有帮助,可参看如下目录详文. IP地址和子网划分学习笔记相关篇章: 1.I ...
IP地址和子网划分学习笔记之《子网划分详解》
一,子网划分概述 IP地址和子网划分学习笔记相关篇章: 1.IP地址和子网划分学习笔记之<预备知识:进制计数> 2.IP地址和子网划分学习笔记之<IP地址详解> 3.IP地址和 ...
对联智能生成的原理（学习笔记附代码实现与详解）
文章均从个人微信公众号" AI牛逼顿"转载,文末扫码,欢迎关注! 过年的脚步越来越近,是不是该给家里贴上一副对联呢?除了买买买,有没有想过自己动手写出一副对联?来吧,撸起袖子加油干 ...
redis学习笔记(2)之redis主从详解
redis主从详解主从详解主从配置拓扑原理数据同步概念复制偏移量复制积压缓冲区主节点运行ID Psync命令全量复制流程部分复制流程心跳缓冲大小调节读写分离内容来源为六星 ...
redis学习笔记(7)之redis哨兵详解
redis哨兵详解 sentinel命令客户端连接素材代码思路实现过程哨兵的切换实现原理发布订阅基础哨兵的实现原理部署建议需要关注的问题代码流程内容来源为六星教育,这里仅作为学习 ...
mmdetection学习笔记（二）配置文件详解
配置文件详解四项基础配置 1. _base_/datasets 2. _base_/models 3. _base_/schedules 4. _base_/default_runtime.py 基 ...
linux getline函数用法,Linux文本处理三剑客之awk学习笔记05：getline用法详解
getline用法详解在默认情况下,awk支持从文件或者STDIN中读取数据.我们也可以使用getline来灵活读取数据,例如在main代码块执行过程中读取某个非待处理文件的数据,或者从某个读取某个 ...

Angular学习笔记——自定义指令directive参数详解

一、基础的几个指令：

二、directive的参数详解：

restrict:String

priority:number

terminal: Boolean

replace:Boolean

Scope（重要）

1. scope为false

2. scope为true

3. scope:{ } 隔离的scope

Angular学习笔记——自定义指令directive参数详解相关推荐

最新文章

热门文章

Angular学习笔记——自定义指令directive参数详解

一、 基础的几个指令：

二、directive的参数详解：

restrict:String

priority:number

terminal: Boolean

replace:Boolean

Scope（重要）

1. scope为false

2. scope为true

3. scope:{ } 隔离的scope

Angular学习笔记——自定义指令directive参数详解相关推荐

最新文章

热门文章

一、基础的几个指令：