Di sini saya berbagi dengan Anda contoh menggunakan metode $ attrs di AngularJS:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8">
<title>
Dokumen tanpa judul
</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>
Konten asli
</h1>
<H2 T2>
Konten asli
</h2>
<h3 t3 = "hiphop" title2 = "{{name}}">
Konten asli
</h3>
<Div Compile> </div>
<div>
<test a = "{{a}}" bc = "xxx"> </test>
<tombol ng-click = "a = a+1">
Merevisi
</tombol>
</div>
<te a = "1" ys-a = "123" ng-click = "show (1)"> di sini </te>
</div>
<script>
var app = angular.module ('demo', [], angular.noop);
app.controller ("testctrl",
fungsi ($ scope) {
$ scope.name = "qihao";
});
app.directive ("t",
fungsi() {
kembali {
controller: function ($ scope) {$ scope.name = "qq"},
Template: "<div> test: implementToparent {{name}} </div>",
Ganti: Benar,
Lingkup: Benar // Lingkup diwarisi, default diwariskan
}
});
app.directive ("T2",
fungsi() {
kembali {
controller: function ($ scope) {$ scope.name = "nono"},
Template: "<div> test: implementToparent {{name}} </div>",
Ganti: Benar,
Batasi: "AE"
}
});
app.directive ("T3",
fungsi() {
kembali {
Template: "<div> test: implementToparent_titleis: {{title}} <br> title2is: {{title2}} </div>",
Ganti: Benar,
Batasi: "AE",
Lingkup: {
Judul: "@T3",
Title2: "@title2"
}
}
});
app.directive ('a',
fungsi() {
var func = function () {
console.log ('compile');
return function () {
console.log ('link');
}
}
var controller = fungsi ($ scope, $ element, $ attrs, $ transclude) {
// $ transclude: adalah salinan tag instruksi
console.log ('controller');
console.log ($ scope);
console.log ($ transclude);
// $ Transclude menerima dua parameter, Anda dapat beroperasi pada elemen yang dikloning.
var node = $ transclude (function (clone_element, scope) {
$ element.Append (clone_element);
$ element.append ("<span> Spantag ___ </span>");
console.log (clone_element);
console.log ('-');
console.log (lingkup);
});
console.log (node);
}
kembali {
kompilasi: func,
Template: "<h1 ng-transclude> </h1>",
Pengontrol: Pengontrol,
Transclude: Benar,
Batasi: 'AE'
}
});
app.directive ('compile', function () {
var func = function () {
console.log ('a compile');
kembali {
pre: function () {
Console.log ('A Link Pre')
},
POST: function () {
Console.log ('Posting Tautan')
},
}
}
kembali {
Batasi: "AE",
Kompilasi: Func
}
})
app.directive ('test', function () {
var func = function ($ element, $ attrs) {
console.log ($ attrs);
$ attrs. $ amati ('a', function (new_v) {
console.log (new_v);
});
}
return {compile: func,
Batasi: '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. Set B untuk properti ini, nilainya ooo, itu saja
$ attrs. $ set ('b', 'ooo');
$ attrs. $ set ('a-b', '11');
// Saya masih belum mengerti ini // nilai parameter kedua
$ attrs. $ set ('c-d', '11', true, 'c_d');
console.log ($ attrs);
}
kembali {
Compile: function () {
return func
},
Batasi: 'E'
}
});
app.controller ('testctrl', function ($ scope) {
$ scope.show = function (v) {console.log (v);}
});
</script>
</body>
</html>
Itu saja untuk artikel ini. Saya harap Anda dapat memiliki pemahaman baru tentang penggunaan $ attrs di AngularJS. Saya harap Anda bisa menyukai artikel ini.