This time I will show you how to use Angularjs custom instructions and what are the precautions for using Angularjs custom instructions. 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. :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
|
The above is how to write the command. Let’s take a look at what’s inside Controller:
1 2 3 4 5 |
|
Finally, don’t forget the usage in html:
Copy code The code is as follows:
[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 to find the controller method.
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.
Three: Data formatting between view and model
Function similar to filter, sometimes we want the page to display data It looks like it has been translated to facilitate 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) {//Data formatting from model to view});
2.ctrl.$parsers.unshift(function(input) {//Data formatting from view to model change}).
The above $formatters and $parsers are two queues, view to model and model to view, which will facilitate filtering through the methods defined inside, somewhat similar to pipeline flow, and finally flow 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 find 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: Several fragmentary skills
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 up a specified model value for monitoring, and of course there are methods such as monitoring collections: $scope.$watch(attrs['ngModel'], function(newValue, oldValue) {});
3. Sometimes the newly added string in the instruction needs to be managed by angularjs, 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:
How to use Angular CLI to create an Angular project
How to use JS to implement Huffman coding
The above is the detailed content of How to use Angularjs custom directives. For more information, please follow other related articles on the PHP Chinese website!