Comment utiliser les directives personnalisées Angularjs

Cette fois, je vais vous montrer comment utiliser les instructions personnalisées Angularjs et quelles sont les précautions pour utiliser les instructions personnalisées Angularjs. Ce qui suit est un cas pratique, jetons un coup d'oeil.

1 : Modèles couramment utilisés pour les instructions personnalisées

Ce qui suit est une description approximative, non exhaustive. Certains détails non mentionnés et connaissances connexes importantes seront expliqués plus tard :

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 : Certaines descriptions d'attributs

[portée]

peuvent définir des booléens ou des objets. Parlons d'abord de booléens.

1. Lorsqu'il est défini sur true, cela signifie hériter de la portée parent et est une portée enfant.

2 Lorsqu'il est défini sur false, il utilise directement la portée parent.

Il existe une autre méthode de définition d'objet, qui consiste à définir une portée isolée. Lors de l'utilisation de la portée isolée, trois méthodes sont proposées pour interagir avec des endroits en dehors de l'isolement. Voici un exemple pour illustrer un par un :

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);        
      };
    }
  };
}]);

Ce qui précède explique comment écrire la commande. Jetons un coup d'œil à ce qu'il y a à l'intérieur du contrôleur :

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

Enfin, n'oubliez pas le utilisation en html :

Copier le code Le code est le suivant :

[require]

Demandez un autre contrôleur, puis transmettez-le comme quatrième paramètre de la méthode de lien. Ce à quoi nous devons prêter attention est de trouver les méthodes du contrôleur.

La méthode de recherche d'un contrôleur peut être comprise ainsi : utiliser ? Indique que si le contrôleur requis n'est pas trouvé dans la commande actuelle, null sera transmis comme quatrième paramètre à la fonction de lien. Si le préfixe ^ est ajouté, la commande recherchera le contrôleur spécifié par le paramètre require dans le paramètre require. chaîne de commandes en amont. , ils peuvent également être combinés, comme require: "?^ngModel". S'il n'y a pas de préfixe, l'instruction recherchera dans le contrôleur fourni par elle-même. Si aucun contrôleur (ou instruction avec le nom spécifié) n'est présent. trouvé, il lancera une erreur.

[terminal]

Terminal d'attribut : Lorsqu'il est vrai, les instructions avec une priorité inférieure à l'instruction actuelle ne seront pas exécutées, et seule cette instruction sera exécutée.

3 : Formatage des données entre la vue et le modèle

Semblable à la fonction de filtre, parfois nous souhaitons que la page affiche des données. il a été traduit pour faciliter l'accord, mais pour la base de données, un simple numéro de série peut être plus avantageux, vous devrez donc peut-être utiliser la méthode suivante dans le lien pour réaliser cette fonction :

1.ctrl $. formatters.unshift(function(input) {//Formatage des données du modèle à la vue});

2.ctrl.$parsers.unshift(function(input) {//Formatage des données de la vue au changement de modèle} ).

Les $formatters et $parsers ci-dessus sont deux files d'attente, vue à modèle et modèle à vue, ce qui facilitera le filtrage à travers les méthodes définies à l'intérieur, quelque peu similaire au flux de pipeline, et enfin le flux vers la destination.

N'oubliez pas de définir une instruction comme require: "?ngModel" pour trouver le contrôleur.

Quatre : Problèmes de synchronisation des données d'affichage et de modèle

Parfois, les données d'entrée sont modifiées via jquery dans l'instruction, mais angulairejs ne le saura pas pour le moment. Vous pouvez choisir l'une des méthodes suivantes :

1. Déclenchez le changement de la zone de saisie, laissez Angularjs constater que les données ont changé, puis appelez $setViewValue(value) pour synchroniser les données : $(" input").trigger( "change");

2. Déclenchez directement manuellement le comportement de synchronisation de la valeur avec viewValue et modelValue : ctrl.$setViewValue($scope.info).

Cinq : Quelques compétences dispersées
1. Définissez vrai ou faux selon que la zone de saisie est légale : ctrl.$setValidity(errorType, boolean);//errorType représente la catégorie d'erreur et peut être personnalisé

2. Configurez une valeur de modèle spécifiée pour la surveillance, et bien sûr, il existe des méthodes telles que la surveillance des collections : $scope.$watch(attrs['ngModel'], function(newValue, oldValue) {} );

3. Parfois, la chaîne nouvellement ajoutée dans l'instruction doit être gérée par angulairejs, vous pouvez utiliser la méthode suivante pour la compiler : $compile(newHtml)($scope).

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser Angular CLI pour créer un projet Angular

Comment utiliser JS pour implémenter le codage Huffman

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!