ที่นี่ฉันกำลังแบ่งปันตัวอย่างของการใช้วิธีการ $ attrs ใน AngularJs:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>
เอกสารที่ไม่มีชื่อ
</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>
เนื้อหาต้นฉบับ
</h1>
<H2 T2>
เนื้อหาต้นฉบับ
</h2>
<h3 t3 = "hiphop" title2 = "{{name}}">
เนื้อหาต้นฉบับ
</h3>
<Div Compile> </div>
<div>
<ทดสอบ a = "{{a}}" bc = "xxx"> </stest>
<ปุ่ม ng-click = "a = a+1">
ปรับปรุงใหม่
</kout>
</div>
<te a = "1" ys-a = "123" ng-click = "แสดง (1)"> ที่นี่ </te>
</div>
<script>
var app = angular.module ('demo', [], Angular.noop);
App.Controller ("TestCtrl"
ฟังก์ชั่น ($ scope) {
$ scope.name = "qihao";
-
app.directive ("t",
การทำงาน() {
กลับ {
คอนโทรลเลอร์: ฟังก์ชั่น ($ scope) {$ scope.name = "qq"}
เทมเพลต: "<div> ทดสอบ: appleentoparent {{name}} </div>"
แทนที่: จริง
ขอบเขต: True // ขอบเขตถูกสืบทอดค่าเริ่มต้นได้รับการสืบทอด
-
-
App.directive ("T2"
การทำงาน() {
กลับ {
คอนโทรลเลอร์: ฟังก์ชั่น ($ scope) {$ scope.name = "nono"}
เทมเพลต: "<div> ทดสอบ: appleentoparent {{name}} </div>"
แทนที่: จริง
จำกัด : "AE"
-
-
app.directive ("T3"
การทำงาน() {
กลับ {
เทมเพลต: "<div> ทดสอบ: appleentoparent_titleis: {{title}} <br> title2is: {{title2}} </div>"
แทนที่: จริง
จำกัด : "AE",
ขอบเขต: {
ชื่อเรื่อง: "@t3",
title2: "@title2"
-
-
-
app.directive ('a',
การทำงาน() {
var func = function () {
console.log ('Compile');
return function () {
console.log ('ลิงก์');
-
-
var controller = function ($ scope, $ element, $ attrs, $ transclude) {
// $ transclude: เป็นสำเนาของแท็กคำสั่ง
console.log ('คอนโทรลเลอร์');
console.log ($ scope);
console.log ($ transclude);
// $ transclude ยอมรับสองพารามิเตอร์คุณสามารถทำงานกับองค์ประกอบที่โคลน
var node = $ transclude (ฟังก์ชัน (clone_element, ขอบเขต) {
$ element.append (clone_element);
$ element.append ("<span> spantag ___ </span>");
console.log (clone_element);
console.log ('-');
console.log (ขอบเขต);
-
console.log (โหนด);
-
กลับ {
คอมไพล์: func,
เทมเพลต: "<h1 ng-transclude> </h1>"
คอนโทรลเลอร์: คอนโทรลเลอร์
transclude: จริง
จำกัด : 'AE'
-
-
app.directive ('Compile', function () {
var func = function () {
console.log ('A Compile');
กลับ {
pre: function () {
console.log ('ลิงค์ล่วงหน้า')
-
Post: function () {
console.log ('ลิงค์โพสต์')
-
-
-
กลับ {
จำกัด : "AE",
คอมไพล์: func
-
-
app.directive ('ทดสอบ', function () {
var func = function ($ element, $ attrs) {
console.log ($ attrs);
$ attrs. $ observe ('a', ฟังก์ชั่น (new_v) {
console.log (new_v);
-
-
return {Compile: func,
จำกัด : 'e'}
-
app.controller ('testctrl', ฟังก์ชั่น ($ scope) {
$ scope.a = 123;
-
app.directive ('te', function () {
var func = function ($ scope, $ element, $ attrs, $ ctrl) {
console.log ($ ctrl)
//$ATTRS.$SET Set B สำหรับคุณสมบัตินี้ค่าคือ ooo นั่นคือมัน
$ attrs. $ set ('b', 'ooo');
$ attrs. $ set ('A-B', '11');
// ฉันยังไม่เข้าใจสิ่งนี้ // ค่าพารามิเตอร์ที่สอง
$ attrs. $ set ('c-d', '11', true, 'c_d');
console.log ($ attrs);
-
กลับ {
คอมไพล์: ฟังก์ชัน () {
คืนฟังก์ชั่น
-
จำกัด : 'E'
-
-
app.controller ('testctrl', ฟังก์ชั่น ($ scope) {
$ scope.show = function (v) {console.log (v);}
-
</script>
</body>
</html>
นั่นคือทั้งหมดสำหรับบทความนี้ ฉันหวังว่าคุณจะมีความเข้าใจใหม่เกี่ยวกับการใช้ $ attrs ใน AngularJs ฉันหวังว่าคุณจะชอบบทความนี้