AngularJS - 指令的设置选项

restrict : 字符串

控制指令在DOM中是以什么形式被声明的, 默认值是 ‘A‘

可选参数如下

  E 元素 : <my-directive></my-directive>

  A 属性 : <div my-directive></div>

  C 类 : <div class="my-directive"></div>

  M 注释 : <!--directive:my-directive-->

这些参数可以单独使用 , 也可以混合使用 , 如 ‘AE‘

priority : 数值

优先级 , 根据数值的大小进行先后调用 , 默认值为 0

terminal : 布尔

是否停止运行当前元素上比本指令优先级低的指令

template : 字符串 或 函数

字符串 : 一段 HTML 文本

函数 : function (tElement, tAttrs ) , 返回值是代表模版的字符串

templateUrl : 字符串 或 函数

字符串 : 表示 HTML 文件路径的字符串

函数 : function( tElement, tAttrs ) , 返回值是表示 HTML 文件路径的字符串

replace : 布尔

值为 true 时 , 模版会直接替换调用这个指令的元素 , 默认值为 false , 模版会插入到调用这个指令的元素的内部

scope : 布尔 或 对象

布尔 : 如果为 true , 会从父作用域继承并创建一个新的作用域对象 , 默认值为 false

对象 : 创建具有隔离作用域的指令 , 给 scope 属性赋值一个空对象 ( scope : {} ) 就可以了

隔离作用域与指令外部的作用域进行数据绑定的几种方法 :

  本地作用域属性 : 使用 @ 符号 或 @attr ( attr为元素上的属性名, 要用驼峰命名法 )

  双向绑定 : 使用 = 符号 或 =attr

  父级作用域绑定 : 使用 & 或 &attr

transclude : 布尔

是否需要将当前指令内部的子元素嵌入到指令中 , true为需要 , 默认为false

controller : 字符串 或 函数

字符串 : 如果参数为字符串 , 则会以这个字符串为名字 , 在应用中查找注册的控制器

函数 : 通过匿名构造函数的方式定义一个内联控制器

controllerAs : 字符串

设置控制器的别名

require : 字符串 或 数组

字符串或数组中的元素代表着另一个指令的名字 , 并将名字对应的指令的控制器传入到链接函数中的第四个参数上 ,

在参数前面添加前缀可以改变查找控制器的方式

  ? : 如果在当前指令中没有找到所需要的控制器 , 会将null传给link函数的第四个参数

  ^ : 指令会在上游指令链中查找require参数所指定的指令的控制器

  ?^ : 两个指令可以组合使用

  不加前缀 : 如果没有前缀 , 指令将会在自身所提供的控制器中进行查找 , 如果没有找到 , 则抛出一个错误

link : 函数

链接函数会在模板编译并同作用域进行链接后被调用 , 它负责设置事件监听器 , 监视数据变化和实时的操作DOM

链接函数的签名 , link : function(scope, element, attrs, controllers){} , 如果指令定义中有 require 这个参数 , 则 link 函数会有第四个参数

  scope : 在指令内部注册监听器的作用域

  element : 使用这个指令的元素

  attrs : 实例的属性

  controllers : 指向 require 对应的控制器 , 如果没指定 require , 那么 controllers 的值为 undefined

compile : 函数

编译函数负责对模版DOM进行转换 , 在函数中可以更改DOM元素 , 或者对DOM元素事件进行绑定 , 返回值是个函数 , 这个返回的函数就是 link

compile 和 link 是互斥的 , 如果同时设置这两个参数 , 那么会把 compile 返回的函数当作 link 函数 , link 将会被 compile 返回的函数重载

原文地址:https://www.cnblogs.com/mpci/p/11044422.html

时间: 2024-11-10 14:56:25

AngularJS - 指令的设置选项的相关文章

angularJS 指令二

指令详解1.用directive()方法来定义指令.directive('myDirective',function($timeout,userDefinedService){ return {};});该方法接受两个参数:name(字符串):指令的名字,用来在视图中引用特定的指令factory_function(函数):该函数返回一个对象,其中定义了指令的全部行为当AngularJS启动应用时,会把第一个参数当做一个字符串,并以此字符串为名来来注册第二个参数返回的对象.也可以返回一个函数代替对

一招制敌 - 玩转 AngularJS 指令的 Scope (作用域),讲得特别好

学习了AngularJS挺长时间,最近再次回首看看指令这部分的时候,觉得比自己刚开始学习的时候理解的更加深入了,尤其是指令的作用域这部分. 步入正题: 每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{}:默认情况下是false. scope = false 首先我们来看

angularjs 指令—— 绑定策略(@、=、&amp;)

angularjs 指令—— 绑定策略(@.=.&) 引入主题背景:angular 的指令配置中的template可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新.那么需要用到那些变量,因用法的不同,所以需要设置合适的绑定策略. 一.@ 绑定策略 @ 绑定策略,它的作用就是能把指令配置的独立Scope下变量的值等于根据@绑定的指令属性的值.(指令属性的值可以使用表达式,但是得出来的值一定是字符串.) 1.上代码: html代码 <!DOCTYPE html> <h

AngularJS 指令

AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许自定义指令. AngularJS 指令是扩展的 HTML 属性,带有前缀 ng-. ng-app 指令初始化一个 AngularJS 应用程序. ng-init 指令初始化应用程序数据. ng-model 指令把元素值(比如输入域的值)绑定到应用程序. 实例 <div ng-app="" ng-init=&quo

angularJs指令 之 select

angular中的select指令必须配合 ng-model 使用,否则无效,不能正常显示. 以下是示例中将要用到的数据对象,控制器中定义如下: app.controller("demoCtrl",["$scope", function($scope) { //定义测试数据 $scope.data0 = [{id: 1, name: "男"}, {id: 0, name: "女"}]; $scope.data1 = [{id:

vsftp的设置选项

设置匿名用户上传的文件的权限: anon_umask= 匿名用户新增文件的umask 数值.默认值为077. VSFTPD的设置选项 VSFTPD的配置文件/etc/vsftpd/vsftpd.conf是个文本文件.以“#”字符开始的行是注释行.每个选项设置为一行,格式为“option=value”,注意“=”号两边不能留空白符.除了这个主配置文件外,还可以给特定用户设定个人配置文件,具体介绍见后.  VSFTPD包中所带的vsftpd.conf文件配置比较简单,而且非常偏执狂的(文档自称).我

AngularJs指令(一)

AngularJs应用现在越来越流行了,谷歌都与微软合作支持AngularJS2.0,这是要逆天了,说明AngularJs将来大势所趋.最近想跳槽,又重新拾起了AngluarJs(之前由于缺少项目应用,一直都是学了就忘记了),也写写复习的知识点,希望这次能让我对AngularJs的理解更深入透彻. 知识概要 一.什么是指令Directive 二.指令的编译过程及命名方式 二.AngularJS自定义指令的配置参数 二.AngularJS的内置指令有哪些 什么是指令Directive Angula

SOAP 格式设置选项

SOAP 格式设置选项 两个格式设置选项为: Style:适用于 SOAP 消息中 Body 元素的子元素(也可能是孙级).此选项指定为 binding WSDL 元素(通常情况下)或 operation 元素的 style 属性. Use:适用于出现在下一个级别的 Web 服务方法参数(或返回值).此选项指定为 body 元素的 use 属性. 有关 SOAP 规范的详细信息,请访问 W3C 网站 (http://www.w3.org/TR/SOAP).有关 WSDL 规范的详细信息,也可以访

AngularJS指令中的compile与link函数解析

AngularJS指令中的compile与link函数解析 通常大家在使用ng中的指令的时候,用的链接函数最多的是link属性,下面这篇文章将告诉大家complie,pre-link,post-link的用法与区别. 原文地址 angularjs里的指令非常神奇,允许你创建非常语义化以及高度重用的组件,可以理解为web components的先驱者. 网上已经有很多介绍怎么使用指令的文章以及相关书籍,相互比较的话,很少有介绍compile与link的区别,更别说pre-link与post-lin