ฉันจะส่งผ่านแอตทริบิวต์หลายรายการไปยังคำสั่งแอตทริบิวต์ Angular.js ได้อย่างไร


116

ฉันมีคำสั่งแอตทริบิวต์ที่ จำกัด ดังนี้:

 restrict: "A"

ฉันต้องการส่งผ่านคุณสมบัติสองอย่าง หมายเลขและฟังก์ชัน / การโทรกลับโดยเข้าถึงภายในคำสั่งโดยใช้attrsวัตถุ

หากคำสั่งเป็นคำสั่งองค์ประกอบถูก จำกัด ด้วย"E"สิ่งนี้:

<example-directive example-number="99" example-function="exampleCallback()">

อย่างไรก็ตามด้วยเหตุผลที่ฉันจะไม่เข้าไปฉันต้องการคำสั่งเพื่อเป็นคำสั่งแอตทริบิวต์

ฉันจะส่งคุณสมบัติหลายรายการไปยังคำสั่งแอตทริบิวต์ได้อย่างไร


ขึ้นอยู่กับประเภทของขอบเขตที่คำสั่งของคุณสร้างขึ้น (ถ้ามี) ตัวเลือกคือ: ไม่มีขอบเขตใหม่ (ค่าเริ่มต้นหรือชัดเจนกับscope: false) ขอบเขตใหม่ (ที่มีการสืบทอดต้นแบบปกติเช่นscope: true) และขอบเขตการแยก (กล่าวคือscope: { ... }) คำสั่งของคุณสร้างขอบเขตประเภทใด
Mark Rajcok

1
@MarkRajcok มันมีขอบเขตที่แยกได้
Undistraction

คำตอบ:


202

คำสั่งสามารถเข้าถึงแอตทริบิวต์ใด ๆ ที่กำหนดไว้ในองค์ประกอบเดียวกันแม้ว่าคำสั่งจะไม่ใช่องค์ประกอบก็ตาม

แม่แบบ:

<div example-directive example-number="99" example-function="exampleCallback()"></div>

Directive:

app.directive('exampleDirective ', function () {
    return {
        restrict: 'A',   // 'A' is the default, so you could remove this line
        scope: {
            callback : '&exampleFunction',
        },
        link: function (scope, element, attrs) {
            var num = scope.$eval(attrs.exampleNumber);
            console.log('number=',num);
            scope.callback();  // calls exampleCallback()
        }
    };
});

fiddle

หากค่าของแอตทริบิวต์example-numberเป็นแบบฮาร์ดโค้ดฉันขอแนะนำให้ใช้$evalครั้งเดียวและจัดเก็บค่า ตัวแปรnumจะมีประเภทที่ถูกต้อง (ตัวเลข)


ฉันได้แก้ไข HTML ตัวอย่างเพื่อใช้ตัวพิมพ์ใหญ่ ฉันรู้ว่าฉันไม่สามารถใช้มันเป็นองค์ประกอบได้ นั่นคือประเด็นของคำถาม
Undistraction

@Pedr ใช่ขอโทษที่ฉันอ่านเร็วเกินไปเกี่ยวกับการใช้องค์ประกอบ ฉันอัปเดตคำตอบแล้วโดยสังเกตว่าคุณต้องใช้ตัวพิมพ์งูสำหรับแอตทริบิวต์ด้วย
Mark Rajcok

ไม่มีปัญหา. ขอบคุณสำหรับคำตอบ. ฉันแก้ไขชื่อแอตทริบิวต์เพื่อใช้ snake-case คุณตกลงถ้าฉันลบคำตอบนั้นออกจากคำตอบของคุณเพราะมันเป็นเพียงข้อผิดพลาดโง่ ๆ ของฉันและเบี่ยงเบนความสนใจจากประเด็นของคำถามและคำตอบที่แท้จริง?
Undistraction

ฉันไม่เข้าใจ - คำสั่งรู้ได้อย่างไรว่าจะตั้งชื่อสิ่งเดียวกันทั้งหมดที่ระบุไว้ในการใช้งานคำสั่ง ("exampleCallback ()") ในขอบเขตได้อย่างไร ("callback: '& exampleCallback') ขอบเขตควรเป็น" callback: "& exampleFunction" ไม่ใช่หรือ
บลาสเตอร์

1
@FredrikL สำหรับคำสั่งหลายคำในองค์ประกอบเดียวกันโปรดดูstackoverflow.com/a/28735005/215945
Mark Rajcok

19

คุณทำในลักษณะเดียวกับที่คุณทำกับคำสั่งองค์ประกอบ คุณจะมีสิ่งเหล่านี้ในวัตถุ attrs ตัวอย่างของฉันมีการผูกสองทางผ่านขอบเขตการแยก แต่ไม่จำเป็น หากคุณใช้ขอบเขตแยกคุณสามารถเข้าถึงแอตทริบิวต์ด้วยscope.$eval(attrs.sample)หรือเพียงแค่ scope.sample แต่อาจไม่ได้กำหนดไว้ในการเชื่อมโยงทั้งนี้ขึ้นอยู่กับสถานการณ์ของคุณ

app.directive('sample', function () {
    return {
        restrict: 'A',
        scope: {
            'sample' : '=',
            'another' : '='
        },
        link: function (scope, element, attrs) {
            console.log(attrs);
            scope.$watch('sample', function (newVal) {
                console.log('sample', newVal);
            });
            scope.$watch('another', function (newVal) {
                console.log('another', newVal);
            });
        }
    };
});

ใช้เป็น:

<input type="text" ng-model="name" placeholder="Enter a name here">
<input type="text" ng-model="something" placeholder="Enter something here">
<div sample="name" another="something"></div>

9

คุณสามารถส่งวัตถุเป็นแอตทริบิวต์และอ่านลงในคำสั่งเช่นนี้:

<div my-directive="{id:123,name:'teo',salary:1000,color:red}"></div>

app.directive('myDirective', function () {
    return {            
        link: function (scope, element, attrs) {
           //convert the attributes to object and get its properties
           var attributes = scope.$eval(attrs.myDirective);       
           console.log('id:'+attributes.id);
           console.log('id:'+attributes.name);
        }
    };
});

เป็นไปได้ไหมที่จะส่งค่าบูลีนโดยใช้วัตถุ? ฉันพยายามแต่ก็ยังส่งกลับค่าสตริง{{true}} true
Peter Boomsma

4

สิ่งนี้ใช้ได้ผลสำหรับฉันและฉันคิดว่าสอดคล้องกับ HTML5 มากกว่า คุณควรเปลี่ยน html ของคุณเพื่อใช้คำนำหน้า "data-"

<div data-example-directive data-number="99"></div>

และภายในคำสั่งอ่านค่าของตัวแปร:

scope: {
        number : "=",
        ....
    },

0

หากคุณ "ต้องการ" "exampleDirective" จากคำสั่งอื่น + ตรรกะของคุณอยู่ในตัวควบคุม 'exampleDirective' (สมมติว่า 'exampleCtrl'):

app.directive('exampleDirective', function () {
    return {
        restrict: 'A',
        scope: false,
        bindToController: {
            myCallback: '&exampleFunction'
        },
        controller: 'exampleCtrl',
        controllerAs: 'vm'
    };
});
app.controller('exampleCtrl', function () {
    var vm = this;
    vm.myCallback();
});
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.