Ici, je partage avec vous un exemple d'utilisation de la méthode $ attrs dans AngularJS:
La copie de code est la suivante:
<! doctype html>
<html>
<adal>
<meta charset = "utf-8">
<Title>
Document sans titre
</TITAL>
<script src = "http: // localhost: 81 / js / jquery.js">
</cript>
<script src = "http: // localhost: 81 / js / angular.min.js">
</cript>
</ head>
<corps ng-app = "Demo">
<div a>
a_directif
</div>
<div ng-controller = "testctrl">
<h1 t>
Contenu original
</h1>
<h2 t2>
Contenu original
</h2>
<h3 t3 = "hiphop" title2 = "{{name}}">
Contenu original
</h3>
<div compile> </div>
<div>
<test a = "{{a}}" bc = "xxx"> </ test>
<bouton ng-click = "a = a + 1">
Réviser
</ bouton>
</div>
<te a = "1" ys-a = "123" ng-Click = "show (1)"> ici </ te>
</div>
<cript>
var app = angular.module ('démo', [], angular.noop);
app.Controller ("testctrl",
fonction ($ scope) {
$ scope.name = "qihao";
});
app.directive ("t",
fonction() {
retour {
contrôleur: fonction ($ scope) {$ scope.name = "qq"},
modèle: "<div> test: implémentToparent {{name}} </div>",
Remplacer: vrai,
Scope: True // Scope est hérité, la valeur par défaut est héritée
}
});
app.directive ("T2",
fonction() {
retour {
contrôleur: fonction ($ scope) {$ scope.name = "nono"},
modèle: "<div> test: implémentToparent {{name}} </div>",
Remplacer: vrai,
restreindre: "AE"
}
});
app.directive ("T3",
fonction() {
retour {
modèle: "<div> test: implémentToparent_titleis: {{title}} <br> title2is: {{title2}} </div>",
Remplacer: vrai,
restreindre: «ae»,
portée : {
Titre: "@ t3",
Title2: "@ title2"
}
}
});
app.directive ('a',
fonction() {
var func = function () {
console.log ('compile');
return function () {
console.log ('lien');
}
}
var contrôleur = fonction ($ scope, $ element, $ attrs, $ transclude) {
// $ transclude: la copie de la balise d'instructions est-elle
console.log ('contrôleur');
console.log ($ scope);
console.log ($ transclude);
// $ transclude accepte deux paramètres, vous pouvez opérer sur les éléments clonés.
var node = $ transclude (fonction (clone_element, scope) {
$ element.append (clone_element);
$ element.append ("<span> spantag ___ </span>");
console.log (clone_element);
console.log ('-');
console.log (portée);
});
console.log (nœud);
}
retour {
compiler: func,
modèle: "<h1 ng-transclude> </h1>",
Contrôleur: contrôleur,
transclude: vrai,
restreindre: «ae»
}
});
app.directive ('compile', function () {
var func = function () {
console.log («une compilation»);
retour {
pre: function () {
console.log ('un lien pré')
},
Post: function () {
Console.log («un lien post»)
},
}
}
retour {
restreindre: «ae»,
compiler: func
}
})
app.directive ('test', function () {
var func = fonction ($ element, $ attrs) {
console.log ($ attrs);
$ attrs. $ observer ('a', fonction (new_v) {
console.log (new_v);
});
}
return {compile: func,
restreindre: 'e'}
});
app.Controller ('TestCtrl', fonction ($ scope) {
$ scope.a = 123;
});
app.directive ('te', function () {
var func = fonction ($ scope, $ element, $ attrs, $ ctrl) {
console.log ($ ctrl)
//$ATTRS.$set. Définissez B pour cette propriété, la valeur est ooo, c'est tout
$ attrs. $ set ('b', 'ooo');
$ attrs. $ set ('a-b', '11');
// Je ne comprends toujours pas cela // la deuxième valeur de paramètre
$ attrs. $ set ('c-d', '11', true, 'c_d');
console.log ($ attrs);
}
retour {
compiler: function () {
Retour func
},
restreindre: «e»
}
});
app.Controller ('TestCtrl', fonction ($ scope) {
$ scope.show = fonction (v) {console.log (v);}
});
</cript>
</docy>
</html>
C’est tout pour cet article. J'espère que vous pourrez avoir une nouvelle compréhension de l'utilisation de $ attrs dans AngularJS. J'espère que vous pouvez aimer cet article.