Hier teile ich mit Ihnen ein Beispiel für die Verwendung der $ attrs -Methode in AngularJS:
Die Codekopie lautet wie folgt:
<! docType html>
<html>
<kopf>
<meta charset = "utf-8">
<title>
Dokument ohne Titel
</title>
<script src = "http: // localhost: 81/js/jquery.js">
</script>
<script src = "http: // localhost: 81/js/angular.min.js">
</script>
</head>
<Body Ng-App = "Demo">
<div a>
a_directive
</div>
<div ng-controller = "testctrl">
<h1 t>
Originalinhalt
</h1>
<H2 T2>
Originalinhalt
</h2>
<H3 T3 = "HipHop" tites2 = "{{name}}">
Originalinhalt
</h3>
<div Compile> </div>
<div>
<test a = "{{a}}" bc = "xxx"> </test>
<button ng-klick = "a = a+1">
Überarbeiten
</button>
</div>
<te a = "1" ys-a = "123" ng-klick = "show (1)"> hier </te>
</div>
<Script>
var app = angular.module ('Demo', [], Angular.noop);
app.controller ("testctrl",
Funktion ($ Scope) {
$ scope.name = "qihao";
});
app.directive ("T",,
function () {
zurückkehren {
Controller: Funktion ($ scope) {$ scope.name = "qq"},
Vorlage: "<Div> Test: ImplementToparent {{Name}} </div>",
ersetzen: wahr,
SCOPE: TRUE // Umfang wird vererbt, Standard wird vererbt
}
});
App.Directive ("T2",
function () {
zurückkehren {
Controller: Funktion ($ scope) {$ scope.name = "nono"},
Vorlage: "<Div> Test: ImplementToparent {{Name}} </div>",
ersetzen: wahr,
Einschränken: "ae"
}
});
App.Directive ("T3",
function () {
zurückkehren {
Vorlage: "<Div> test: ImplementToparent_titleis: {{title}} <br> title2is: {{title2}} </div>",
ersetzen: wahr,
einschränken: "ae",
Umfang : {
Titel: "@t3",
Titel2: "@title2"
}
}
});
app.directive ('a',,
function () {
var func = function () {
console.log ('compile');
return function () {
console.log ('link');
}
}
var Controller = Funktion ($ scope, $ element, $ attrs, $ transclude) {
// $ transclude: Ist die Kopie des Anweisungs -Tags
console.log ('Controller');
console.log ($ scope);
console.log ($ transclude);
// $ transclude akzeptiert zwei Parameter, Sie können mit den geklonten Elementen arbeiten.
var node = $ transclude (Funktion (Clone_Element, Scope) {
$ element.Append (Clone_Element);
$ element.append ("<span> spantag ___ </span>");
console.log (clone_element);
console.log ('-');
console.log (scope);
});
console.log (Knoten);
}
zurückkehren {
kompilieren: func,
Vorlage: "<H1 ng-transclude> </h1>",
Controller: Controller,
transklude: wahr,
einschränken: 'ae'
}
});
app.directive ('compile', function () {
var func = function () {
console.log ('a compile');
zurückkehren {
pre: function () {
console.log ('a link pre')
},
Beitrag: function () {
console.log ('ein Linkpost')
},
}
}
zurückkehren {
einschränken: "ae",
kompilieren: func
}
})
app.directive ('test', function () {
var func = function ($ element, $ attrs) {
console.log ($ attrs);
$ attrs. $ beobachten ('a', function (new_v) {
console.log (new_v);
});
}
Rückgabe {Compile: func,
einschränken: 'e'}
});
app.controller ('testctrl', function ($ scope) {
$ scope.a = 123;
});
app.directive ('te', function () {
var func = function ($ scope, $ element, $ attrs, $ ctrl) {
console.log ($ ctrl)
//$attrs.$Set. Setzen Sie B für diese Eigenschaft, der Wert ist ooo, das ist es
$ attrs. $ set ('b', 'ooo');
$ attrs. $ set ('a-b', '11');
// Ich verstehe diesen // den zweiten Parameterwert immer noch nicht
$ attrs. $ set ('c-d', '11', true, 'c_d');
console.log ($ attrs);
}
zurückkehren {
kompilieren: function () {
Func zurückgeben
},
einschränken: 'E'
}
});
app.controller ('testctrl', function ($ scope) {
$ scope.show = function (v) {console.log (v);}
});
</script>
</body>
</html>
Das ist alles für diesen Artikel. Ich hoffe, Sie können ein neues Verständnis für die Verwendung von $ Attrs in AngularJs haben. Ich hoffe, Sie können diesen Artikel mögen.