Summary of tips for using custom directives in Angularjs

This time I will bring you a summary of the tips for using custom instructions in Angularjs, what are the precautions for using custom instructions in Angularjs, the following are practical cases, let’s take a look one time.

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 inside Controller:

$scope.name = "心叶";
$scope.user = "yelloxing";
$scope.sendMail = function(email){
  console.error(email);
}

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:

Detailed explanation of the steps to create an Angular project with Angular CLI

Detailed explanation of the steps to implement Huffman coding in source js

The above is the detailed content of Summary of tips for using custom directives in Angularjs. For more information, please follow other related articles on the PHP Chinese website!