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!