angular指令

作者: Look_a_Look | 来源:发表于2017-08-09 12:57 被阅读23次
app.directive("myDirective", function() {
     return{
          name:"myDirective",
          restrict:EA,
          ·······
     }
})

Note:此处myDir指令名称如果包含大写(驼峰),则HTML中应该使用短横线分割

指令参数:
restrict 指令可以以哪些方式被使用,可以同时定义多种方式。
E 元素方式 、A 属性方式 、C 类方式 、M 注释方式
template 模板内容,HTML代码
templateUrl 从指定地址获取HTML模板文件,获取方式是异步请求
replace 是否使用模板内容替换掉整个节点,true替换整个节点,默认false,保留节点,替换节点里的内容。
priority 这个值设置指令的权重,默认是0。当一个节点中有多个指令存在时,就按着权限从大到小的顺序依次执行它们的compile函数。相同权重顺序不定。
terminal 是否以当前指令的权重为结束界限。如果这值设置为true,则节点中权重小于当前指令的其它指令不会被执行。相同权重的会执行。
name
指令的 controller 的名字,以方便在 require 参数中引用。
require
要引用的其它指令 conroller 的名字,?name 忽略不存在的错误,^name 在父级查找。
scope
绑定策略,将指令内部的scope和指令节点所在scope进行数据关联
false:默认值,使用节点的所在controller的scope
true:继承创建一个新的 scope ,节点的所在controller的scope的子scope
{}:不继承,创建一个新的隔离 scope 。
@attr: 【 值引用节点属性,字符串, 值传递 (单向绑定)】
=attr: 【把节点属性值引用成scope属性值attr,引用传递(双向绑定)】
&attr: 【把节点属性值包装成函数,这个函数以节点所在的scope为上下文】
transclude
默认是 false,还可以 true和'element'。通常用来创建可复用的组件
如果指令中包含其他指令或者其他内容,要想保留这些内容,需要设置transclude为true
指令模板代码中同时需要有 ng-transclude 标签
ng-transclude 告诉Angular把指令标签内部的内容保留并嵌入在模板的什么地方
****compile****
基本的定义函数。
function compile(tElement, tAttrs, transclude) { ... }
controller
为指令定义一个 controller ,在compile之后,link之前执行
可以是一个字符串,angular会以字符串的值来查找注册在应用中的控制器构造函数
也可以是一个函数:function controller($scope, $element, $attrs, $transclude) { ... }
link
大多数时候我们不需要单独定义它。只有compile未定义时link才有可能定义
function link(scope, iElement, iAttrs, controller) { ... }

相关文章

  • angular内置指令相关知识

    大纲 1、angular指令的分类2、angular指令之——组件3、angular指令之——属性指令 (ngSt...

  • 自定义指令(上)

    简介 在常用指令的章节中我们讲了Angular提供的指令,这些指令是Angular内部封装好指令,我们开箱...

  • Angular - 指令

    前言 使用指令的优势在于,我们无需太多关心指令的内部实现(当给 Angular 应用添加所需指令后,Angular...

  • Angular 指令,管道,服务

    1. 指令 Directive 指令是 Angular 提供的操作 DOM 的途径。指令分为属性指令和结构指令...

  • 2018-10-19 angular2+安装及常用npm指令

    一、angular2+安装步骤 二、angular2+ npm常用指令

  • Angular ngIf 跟他的新伙伴 else 和 then

    参考:https://angular.cn/api/common/NgIf Angular 扩展了ngIf 指令,...

  • AngularJS入门

    Angular应用程序启动 ng-app指令 指令指定Angular应用程序的根(root)元素,用于启动Angu...

  • angular笔记三

    angular第三天 1.自定义指令 官方都是以ng-开头的指令,而angular内部可以通过自定义指令来创建属于...

  • 重构过程中的信息记录二

    Angular深入理解之指令 angular 事件绑定/属性绑定 @HostListener ,@HostBind...

  • ng事件指令

    概述 Angular JS对各种事件进行了对应指令的封装,使其能够更好的配合Angular JS使用。具有ng指令...

网友评论

    本文标题:angular指令

    本文链接:https://www.haomeiwen.com/subject/qrzopttx.html