Quelques détails et conseils précieux sur les directives personnalisées dans Angularjs

Cet article vous explique principalement quels sont les détails et techniques précieux dans les instructions personnalisées angularjs Connaissez-vous tout cela ? Si vous ne le savez pas, venez y jeter un œil. Jetons un coup d'œil ensemble à cet article

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

Ce qui suit est une description approximative, non exhaustive, je vais expliquer certains détails. ne sont pas mentionnés plus tard. Et les détails et connaissances importantes associées :

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]

Vous pouvez définir des booléens ou des objets. parlez d'abord du booléen. C'est relativement simple :

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

2. la portée est utilisée directement.

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 :

<p scope-example user-data-name="user" on-send=&#39;sendMail(email)&#39; from-name={{name}}></p>

【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, c'est la méthode de recherche 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 passé 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. (Si vous souhaitez en savoir plus, rendez-vous sur le site Web PHP chinois Manuel de développement AngularJS pour en savoir)

[terminal]

Terminal d'attribut : Lorsque vrai, cela indique que la priorité est inférieure à l'instruction en cours. Aucune des instructions ne sera exécutée, 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 de traduction pour faciliter l'accord. Cependant, pour la base de données, un. 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) {// Formatage des données à partir de modèle à afficher});

2.ctrl.$parsers.unshift(function(input) {//Formatage des données de la vue au 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 options suivantes. Méthode :

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 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. , vous pouvez personnaliser

2. Configurer 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).

Six : méthodes ou services couramment utilisés

Il existe deux façons d'analyser une chaîne (il peut s'agir d'un attribut ou d'une méthode). 🎜>

D'accord, cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois

$scope.getInfo=function(){
    console.log('这是执行了函数的表现');
};

var funName="getInfo()";

//执行方法一：
$scope.$eval(funName);
//执行方法二：
$parse(funName)($scope);

Manuel d'utilisation d'AngularJS

pour en savoir plus). Si vous avez des questions, vous pouvez laisser un message ci-dessous. .

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!