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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了AngularJs自定义指令可以如何来设置以及自定义指令的命名规范，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2445字，纯文字阅读大概需要4分钟。

内容图文

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

一、AngularJs自定义指令directive的restrict属性说明：

今天公用的html部分：

<h1 zym-blog></h1>

JavaScript部分：

var m = angular.module('app', []);
m.directive('zymBlog', [function(){
	return {
		restrict : 'AEC',
		template : '<p>hello world</p>',
		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 '<p>赵一鸣个人技术博客</p>';
		},
		replace : true
	};
}]);

四、自定义指令transclude属性：

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

html部分：

<h1 zym-blog>赵一鸣博客http://www.zymseo.com</h1>

js部分：

var m = angular.module('app', []);
m.directive('zymBlog', [function(){
	return {
		restrict : 'AEC',
		template : function(){
			return '<p>赵一鸣AngularJs学习笔记<span ng-transclude></span></p>';
		},
		replace : true,
		transclude : true
	};
}]);

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

相关推荐：

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

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

以上就是AngularJs自定义指令可以如何来设置以及自定义指令的命名规范的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的AngularJs自定义指令可以如何来设置以及自定义指令的命名规范全部内容，希望文章能够帮你解决AngularJs自定义指令可以如何来设置以及自定义指令的命名规范所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

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

内容手机端

---