Comment utiliser les instructions personnalisées Angularjs dans les projets

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

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 dans le contrôleur :

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

Enfin, n'oubliez pas de l'utiliser 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. il faut prêter attention à la méthode pour trouver le 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 : Lorsque 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, nous souhaitons parfois que la page affiche les données après une sorte d'apparence de traduction, pour faciliter la manipulation. 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 implémenter cette fonction :

1.ctrl.$formatters.unshift(function(input) {//model到view的数据格式化})；
2.ctrl.$parsers.unshift(function(input) {//view到model的数据格式化})。

Les $formatters et $parsers ci-dessus Il y a deux files d'attente, vue vers modèle et modèle vers vue, qui faciliteront le filtrage à travers les méthodes définies à l'intérieur, un peu similaires 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 découvrir 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 techniques fragmentaires
Définissez vrai ou faux selon que l'entrée est entrée. box est légal : ctrl.$ setValidity(errorType, boolean);//errorType représente la catégorie d'erreur et peut être personnalisé

2 Définissez une valeur de modèle spécifiée par la surveillance, et bien sûr il existe des méthodes telles que. 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 crois Si vous maîtrisez la méthode après avoir lu le cas dans cet article, n'hésitez pas à venir pour des informations plus intéressantes. Faites attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des propriétés calculées de vue et des projets pratiques d'écoute

Comment utiliser les classes en JS+ TypeScript À utiliser

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!