AngularJs自定义指令可以如何来设置以及自定义指令的命名规范

AngularJS为我们提供了自定义指令的功能,通过此功能,我们可以自定义一些标签,为我们自己的开发来提供帮助。下面的内容我将给大家分享关于AngularJs通过directive和restrict来设置自定义指令的方法。

一、angularjs自定义指令directive的restrict属性说明:

今天公用的html部分:

登录后复制

JavaScript部分:

var m = angular.module('app', []);m.directive('zymBlog', [function(){return {restrict : 'AEC',template : '

hello world

',replace : true};}]);

登录后复制

通过directive设置自定义指令,第一个参数是指令名称,第二个参数是数组,包含一个回调函数,函数的返回值是一个json对象,其中:

restrict表示指令的形式:A是属性、E是元素、C是class类,为了避免和style中的class类混淆,不推荐使用C。

template是模板内容,表示使用这个自定义属性的标签中要插入的内容。

replace的值默认是false,如果是true,说明要用templace中的标签替换html代码中使用这个自定义指令的标签。注意,如果使用replace,那么template中必须包含html元素,不能只是几个文字,否则angular会报错。

下面再来看一个属性,templateUrl和template不能同时出现,templateUrl是引用的模板地址:

var m = angular.module('app', []);m.directive('zymBlog', [function(){return {restrict : 'AEC',templateUrl : './46-1.html',replace : true};}]);

登录后复制

注意,因为这里使用了replace,所以templateUrl对应的模板内容中必须包含html标签元素。

二、自定义指令的标准命名规范:

directive指令名称用驼峰命名法,例如【zymBlog】,那么在html代码中进行调用时,需要在大写字母之前加一个横杠,例如【zym-blog】。

三、自定义指令template函数式操作:

template不仅可以是一个字符串,也可以是一个函数,例如:

var m = angular.module('app', []);m.directive('zymBlog', [function(){return {restrict : 'AEC',template : function(){return '

赵一鸣个人技术博客

';},replace : true};}]);

登录后复制

四、自定义指令transclude属性:

有一种情况,在html中使用了自定义指令,但是标签内部原来就有内容,这样的话,自定义指令里边的内容会把标签原来的内容替换掉,所以需要一个添加一个属性来解决这个问题(ng-transclude):

html部分:

赵一鸣博客http://www.zymseo.com

登录后复制

js部分:

var m = angular.module('app', []);m.directive('zymBlog', [function(){return {restrict : 'AEC',template : function(){return '

赵一鸣AngularJs学习笔记

';},replace : true,transclude : true};}]);

登录后复制

设置ng-transclude的值为true之后,还必须在自定义指令的内部再加入一个标签,并且制定ng-transclude,这样是把原来html标签里边的内容放到这个标签里边!

相关推荐:

AngularJS自定义指令及指令配置项的实现技巧

AngularJS创建自定义指令的方法详解

以上就是AngularJs自定义指令可以如何来设置以及自定义指令的命名规范的详细内容,更多请关注【创想鸟】其它相关文章!

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

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

(0)
上一篇 2025年3月8日 03:45:47
下一篇 2025年2月18日 10:56:48

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

发表回复

登录后才能评论