How to use Angularjs custom instructions in projects
This time I will show you how to use Angularjs custom instructions in projects, and what are the precautions for using Angularjs custom instructions in projects. The following is a practical case, let's take a look.
1: Commonly used templates for custom instructions
The following is a rough description, not comprehensive. Some unmentioned details and important related knowledge will be explained later. ：
angular.module('yelloxingApp', []).directive('uiDirective', function() {
return {
restrict:String,//标明该指令可以在模板中用于元素E、属性A、类C和注释M或组合
priority:Number,//设置指令执行优先级，在某个DOM上优先级高的会先执行
terminal:Boolean,
template:String or Template Function,//就是设置模板，和下面的templateUrl属性二个只可以设置一个，目的一样
templateUrl:String or Template Function,//除了字符串，这二个属性还可以设置函数
replace:Boolean,//指令模板是否替换原来的元素
scope:Boolean or Object,
controller:String or function(scope, element, attrs) { ... },
require:String or Array,
//你需要知道link在每个实例都执行一遍，compile全程只会执行一遍
link: function(scope, element, attrs,ctrl) { ... },
compile:function(element, attrs) {
//常用的就是compile的此处写执行一次的代码，或者在link方法里面写和dom有关的操作
}
};
});2: Some attribute descriptions
[scope]
You can set boolean or objects. Let’s talk about boolean first. This is relatively simple:
1. When set to true, it means inheriting the parent scope and is a child scope;
2. When set to false, the parent scope is used directly.
There is another object setting method, which is to set an isolated scope. When using the isolated scope, three methods are provided to interact with places outside the isolation. Here is an example to illustrate one by one:
angular.module('yelloxingApp', []).directive("scopeExample", ['$rootScope', function($rootScope) {
return {
restrict: 'A',
scope: {
_userDataName: "=userDataName",
_onSend: "&onSend",
_fromName: "@fromName"
},
template: `
<button ng-click="_useParentMethod()">
点击按钮调用父级的方法
</button>
<input ng-model="_userDataName"/>
<ul>
<li>fromName={{newfromname}}</li>
<li>这是从父级获取到的{{_userDataName}}</li>
</ul>`,
link: function($scope, element, attrs) {
//使用@符号可将本地作用域的变量与DOM属性的值进行绑定，即这里通过@得到父类fromName的值
$scope.newfromname = $scope._fromName;
$scope._useParentMethod = function() {
//使用&符号可以在其中调用父类的方法
$scope._onSend({ "email": { "email": "yelloxing@gmail.com" } });
console.log($scope._userDataName);
};
}
};
}]);The above is how to write the command. Let’s take a look at what’s in the controller:
$scope.name = "心叶";
$scope.user = "yelloxing";
$scope.sendMail = function(email){
console.error(email);
}Finally, don’t forget to use it in html:
Copy code The code is as follows:
< /p>
[require]
Request another controller, and then pass it in as the fourth parameter of the link method. What we need to pay attention to is the method of finding the controller.
The method of finding a controller can be understood like this: use? Indicates that if the required controller is not found in the current command, null will be passed as the fourth parameter to the link function. If the ^ prefix is added, the command will search for the controller specified by the require parameter in the upstream command chain. , they can also be combined, such as require: "?^ngModel". If there is no prefix, the instruction will search in the controller provided by itself. If no controller (or instruction with the specified name) is found, it will throw a mistake.
[terminal]
Attribute terminal: When true, instructions with a priority lower than the current instruction will not be executed, and only this instruction will be executed.
3: Data formatting between view and model
Similar to filter function, sometimes we want the page to display the data after some kind of translation to facilitate the agreement, but for the database, a simple serial number may be more beneficial, so you may need to use the following method in the link to achieve this function:
1.ctrl.$formatters.unshift(function(input) {//model到view的数据格式化})；
2.ctrl.$parsers.unshift(function(input) {//view到model的数据格式化})。The above $formatters and $parsers are two A queue, view to model and model to view, will facilitate filtering through the methods defined in it, which is somewhat similar to a pipeline flow, and finally flows to the destination.
Don’t forget to set a statement like require: "?ngModel" to find the controller.
4: View and model data synchronization issues
Sometimes the input data is modified through jquery in the instruction, but angularjs will not know it. At this time, you You can choose one of the following methods:
1. Trigger the change of the input box, let Angularjs discover that the data has changed, and then call $setViewValue(value) to synchronize the data:
$("input").trigger("change");2. Directly manually trigger the behavior of synchronizing value to viewValue and modelValue:
ctrl.$setViewValue($scope.info)。
Five: A few fragmentary techniques
1. Set true or false according to whether the input box is legal: ctrl.$setValidity(errorType, boolean);//errorType represents the error category and can be customized
2. Set a model value specified by the monitoring, and of course there are methods such as monitoring collections:
$scope.$watch(attrs['ngModel'], function(newValue, oldValue) {});3. Sometimes in the command The newly added string needs to be managed by angularjs, so you can use the following method to compile it:
$compile(newHtml)($scope)。
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
Detailed explanation of vue computed properties and listener practical projects
How to perform classes in JS TypeScript use
The above is the detailed content of How to use Angularjs custom instructions in projects. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
UniApp Design and Development Guide for Implementing Custom Instructions and Operation Encapsulation
Jul 06, 2023 pm 11:49 PM
Design and Development Guide for UniApp to Implement Custom Instructions and Operation Encapsulation 1. Introduction In the development of UniApp, we often encounter some repetitive operations or general UI requirements. In order to improve the reusability and maintainability of the code, we This can be achieved using custom instructions and operation encapsulation. This article will introduce how to design and develop custom instructions and operation packages in UniApp, and explain it with code examples. 2. Custom instruction What is a custom instruction? A custom instruction is a kind of instruction provided by Vue.js.
The latest 5 angularjs tutorials in 2022, from entry to mastery
Jun 15, 2017 pm 05:50 PM
Javascript is a very unique language. It is unique in terms of the organization of the code, the programming paradigm of the code, and the object-oriented theory. The issue of whether Javascript is an object-oriented language that has been debated for a long time has obviously been There is an answer. However, even though Javascript has been dominant for twenty years, if you want to understand popular frameworks such as jQuery, Angularjs, and even React, just watch the "Black Horse Cloud Classroom JavaScript Advanced Framework Design Video Tutorial".
Directive function in Vue3: Custom instructions extend Vue3 functions
Jun 18, 2023 pm 05:40 PM
Vue3 is the latest Vue version. Compared with Vue2, it has been upgraded and improved in many aspects. One of the improvements is the directive function. The directive function is a new function in Vue3. It can be used to customize instructions to extend the functions of Vue3. What is a directive? Directives are a special component attribute provided by Vue that are used to add specific behaviors to templates. Directives can be thought of as common directives in AngularJS that operate on elements.
Use PHP and AngularJS to build a responsive website to provide a high-quality user experience
Jun 27, 2023 pm 07:37 PM
In today's information age, websites have become an important tool for people to obtain information and communicate. A responsive website can adapt to various devices and provide users with a high-quality experience, which has become a hot spot in modern website development. This article will introduce how to use PHP and AngularJS to build a responsive website to provide a high-quality user experience. Introduction to PHP PHP is an open source server-side programming language ideal for web development. PHP has many advantages, such as easy to learn, cross-platform, rich tool library, development efficiency
Instruction function in Vue3: Custom instructions make your code more flexible
Jun 18, 2023 pm 05:57 PM
Vue is a very popular front-end framework. In the process of using Vue in recent years, we often use instructions to operate the display and hiding of DOM elements, such as v-if and v-show. However, with the release of Vue3, the directive function (DirectiveFunction) has achieved major changes and improvements. A very useful directive has been added to Vue3 - a custom directive. This article will introduce the instruction function in Vue3 in detail, especially the automatic
How to customize instructions in Vue3? Code explanation
Jul 28, 2022 pm 07:33 PM
How to customize instructions in Vue3? The following article will teach you step by step how to customize instructions in Vue3. I hope it will be helpful to you!
Build web applications using PHP and AngularJS
May 27, 2023 pm 08:10 PM
With the continuous development of the Internet, Web applications have become an important part of enterprise information construction and a necessary means of modernization work. In order to make web applications easy to develop, maintain and expand, developers need to choose a technical framework and programming language that suits their development needs. PHP and AngularJS are two very popular web development technologies. They are server-side and client-side solutions respectively. Their combined use can greatly improve the development efficiency and user experience of web applications. Advantages of PHPPHP
Customize Vue instructions to optimize the Axios experience
Jul 17, 2023 am 11:42 AM
Customize Vue instructions to optimize the Axios experience Introduction: In modern web development, data interaction between the front end and the back end is a very important link. As a popular HTTP request library, Axios is widely used in Vue projects. However, in actual use, we found that the way to use Axios is a bit cumbersome, and we need to manually write some similar code every time we send a request. In order to optimize the Axios usage experience, we can customize a Vue instruction to add commonly used request parameters
