How to set up AngularJs custom directives and the naming convention of custom directives

AngularJS provides us with the function of custom instructions. Through this function, we can customize some tags to help our own development. In the following content, I will share with you how to set custom instructions in AngularJs through directive and restrict.

1. Description of the restrict attribute of AngularJs custom directive directive:

Today’s common html part:

<h1 zym-blog></h1>

JavaScript part:

var m = angular.module('app', []);
m.directive('zymBlog', [function(){
	return {
		restrict : 'AEC',
		template : &#39;<p>hello world</p>&#39;,
		replace : true
	};
}]);

Set a custom instruction through directive. The first parameter is the instruction name, and the second parameter is an array, including a callback function. The return value of the function is a json object, where:

restrict represents the form of the instruction: A is an attribute, E is an element, and C is a class. In order to avoid confusion with the class in style, C is not recommended.

template is the template content, indicating the content to be inserted in the tag using this custom attribute.

The value of replace defaults to false. If it is true, it means that the tag in the template should be used to replace the tag using this custom instruction in the html code. Note that if you use replace, the template must contain html elements, not just a few words, otherwise Angular will report an error.

Let’s look at another attribute. templateUrl and template cannot appear at the same time. templateUrl is the referenced template address:

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

Note that because replace is used here, the template content corresponding to templateUrl must be included. html tag element.

2. Standard naming convention for custom directives:

Directive directive names use camel case naming, such as [zymBlog], then when called in html code, You need to add a dash before the capital letters, such as [zym-blog].

3. Custom instruction template functional operation:

template can not only be a string, but also a function, for example:

var m = angular.module('app', []);
m.directive('zymBlog', [function(){
	return {
		restrict : 'AEC',
		template : function(){
			return &#39;<p>赵一鸣个人技术博客</p>&#39;;
		},
		replace : true
	};
}]);

4. Custom instruction transclude attribute:

There is a situation where a custom instruction is used in html, but there is content inside the tag. In this case, the content in the custom instruction The content will replace the original content of the tag, so you need to add an attribute to solve this problem (ng-transclude):

html part:

<h1 id="赵一鸣博客http-www-zymseo-com">赵一鸣博客http://www.zymseo.com</h1>

js part:

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

After setting the value of ng-transclude to true, you must add another tag inside the custom instruction and specify ng-transclude, so that the content in the original html tag is placed in this tag!

Related recommendations:

AngularJS custom directives and implementation techniques for directive configuration items

Detailed explanation of how to create custom directives in AngularJS

The above is the detailed content of How to set up AngularJs custom directives and the naming convention of custom directives. For more information, please follow other related articles on the PHP Chinese website!