angularJs自定义指令

本篇文章介绍的内容是关于angularjs自定义指令,现在分享给大家,有需要的朋友可以参考一下

1. 定义

对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素 的功能。

2.定义指令的方法:


登录后复制登录后复制

第一个参数,指令的名字myDirective 用来在视图中引用特定的指令。
第二个参数是一个函数,这个函数返回一个对象,$compile服务利用这个方法返回的对 象,在DOM调用指令时来构造指令的行为。

3.指令设置的选项


登录后复制

restrict 指令在DOM中可以何种形式被引用或声明


登录后复制

E(元素)  
A(属性,默认值)

 
C(类名)

 
M(注释)

priority 优先级 用来表示指令使用的优先顺序
如果一个元素上具有两个优先级相同的指令,声明在前面的那个会被优先调用。如果其中一 个的优先级更高,则不管声明的顺序如何都会被优先调用:具有更高优先级的指令总是优先运行。

terminal 用来告诉AngularJS停止运行当前元素上比本指令优先级低的指令。但同当前指令 优先级相同的指令还是会被执行。


登录后复制

template  
用来表示模板,可以是一段字符串,如“

这是自定义指令”,也可以是一个函数,可以参考上面的例子


登录后复制

templateUrl 用来表示模板,与上面的template功能相似,但表示路径,可以是外部HTML文件路径的字符串也可以是一个可以接受两个参数的函数,参数为tElement和tAttrs,并返回一个外部HTML文件 路径的字符串。

replace 默认为false,模板会被当作子元素插入到调用此指令的元素内部,为true,则直接替换此元素


登录后复制登录后复制登录后复制

scope


登录后复制登录后复制


登录后复制登录后复制


登录后复制登录后复制


登录后复制登录后复制登录后复制


登录后复制登录后复制


登录后复制登录后复制登录后复制


登录后复制登录后复制

controller
controller参数可以是一个字符串或一个函数。当设置为字符串时,会以字符串的值为名字, 来查找注册在应用中的控制器的构造函数.当为函数时,可以像平时写控制器那样写,可以将任意可以被注入的AngularJS服务传递给控制器

controllerAs(字符串)
controllerAs参数用来设置控制器的别名,可以以此为名来发布控制器,并且作用域可以访 问controllerAs。这样就可以在视图中引用控制器,甚至无需注入$scope。

require
require参数可以被设置为字符串或数组,字符串代表另外一个指令的名字。require会将控 制器注入到其值所指定的指令中,并作为当前指令的链接函数的第四个参数。

以上就是angularJs自定义指令的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2774018.html

(0)
上一篇 2025年3月8日 14:01:19
下一篇 2025年3月8日 14:01:27

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • AngularJS中遍历数组

    本篇文章给大家分享的内容是关于AngularJS中遍历数组 ,有着一定的参考价值,有需要的朋友可以参考一下 AngularJS中当我们需要遍历某个数组的时候,我们会用到forEach语法。AngularJS中forEach的用法如下: an…

    编程技术 2025年3月8日
    100
  • Vue打包优化之code spliting_vue.js

    这篇文章主要介绍了详解vue打包优化之code spliting,现在分享给大家,有需要的朋友参考一下 在http1的时代,比较常见的一种性能优化就是合并http的请求数量,通常我们会把许多js代码合并在一起,但是如果一个js包体积特别大的…

    2025年3月8日 编程技术
    200
  • vue 自定义 select内置组件

    这篇文章主要介绍了vue 自定义内置组件 select的相关知识,现在分享给大家,具体实例代码大家参考下本文 1.整合了第三方 jQuery 插件 (select2) nbsp;html>               html, bo…

    2025年3月8日
    200
  • vue.js中npm安装教程图解

    这篇文章主要介绍了vue.js中npm安装教程图解,现在分享给大家,需要的朋友可以参考下 首先理清nodejs和npm的关系: node.js是javascript的一种运行环境,是对Google V8引擎进行的封装。是一个服务器端的jav…

    2025年3月8日 编程技术
    200
  • React如何避免重渲染_javascript技巧

    这篇文章主要介绍了react如何避免重渲染,现在分享给大家,也可以给有需要的朋友做个参考 组件的重新渲染 我们可以在 React 组件中的 props 和 state 存放任何类型的数据,通过改变 props 和 state,去控制整个组件…

    2025年3月8日 编程技术
    200
  • Pastate.js 之响应式 react state 管理框架

    本篇文章给大家分享的内容是关于pastate.js 之响应式 react state 管理框架 ,有着一定的参考价值,有需要的朋友可以参考一下 Pastate 简介 Pastate 是什么 Pastate 是一个响应式 react stat…

    2025年3月8日 编程技术
    200
  • Pastate.js 响应式框架之多组件应用

    本篇文章给大家分享的内容是关于pastate.js 响应式框架之多组件应用  ,有着一定的参考价值,有需要的朋友可以参考一下 这是 pastate 系列教程的第二章,欢迎关注,持续更新。 这一章,我们在上一章的 state 结构中添加多一些…

    2025年3月8日 编程技术
    200
  • Pastate.js 响应式框架之数组渲染与操作

    本篇文章给大家分享的内容是关于pastate.js 响应式框架之数组渲染与操作  ,有着一定的参考价值,有需要的朋友可以参考一下 这是 Pastate.js 响应式 react state 管理框架系列教程的第三章,欢迎关注,持续更新。 这…

    2025年3月8日 编程技术
    200
  • Pastate.js 响应式 react 框架之表单渲染与操作

    本篇文章给大家分享的内容是关于pastate.js 响应式 react 框架之表单渲染与操作  ,有着一定的参考价值,有需要的朋友可以参考一下 这是 Pastate.js 响应式 react state 管理框架系列教程的第四章,欢迎关注,…

    2025年3月8日 编程技术
    200
  • Pastate.js 响应式 react 框架之 模块化

    本篇文章给大家分享的内容是关于pastate.js 响应式 react 框架之 模块化  ,有着一定的参考价值,有需要的朋友可以参考一下 这是 Pastate.js 响应式 react state 管理框架系列教程,欢迎关注,持续更新。 P…

    2025年3月8日 编程技术
    200

发表回复

登录后才能评论