Làm cách nào để chuyển nhiều thuộc tính vào chỉ thị thuộc tính Angular.js?

Tôi có một chỉ thị thuộc tính bị hạn chế như sau:

 restrict: "A"

Tôi cần phải vượt qua trong hai thuộc tính; một số và một hàm / gọi lại, truy cập chúng trong lệnh bằng cách sử dụng attrsđối tượng.

Nếu chỉ thị là một chỉ thị phần tử, bị hạn chế với "E"tôi có thể:

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

Tuy nhiên, vì lý do tôi sẽ không đi vào, tôi cần chỉ thị là một chỉ thị thuộc tính.

Làm cách nào để chuyển nhiều thuộc tính vào một chỉ thị thuộc tính?

Lệnh có thể truy cập bất kỳ thuộc tính nào được xác định trên cùng một phần tử, ngay cả khi chính lệnh đó không phải là phần tử.

Bản mẫu:

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

Chỉ thị:

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

Nếu giá trị của thuộc tính example-numbersẽ được mã hóa cứng, tôi khuyên bạn nên sử dụng $evalmột lần và lưu trữ giá trị. Biến numsẽ có loại chính xác (một số).

Bạn thực hiện chính xác theo cách tương tự như với chỉ thị phần tử. Bạn sẽ có chúng trong đối tượng attrs, mẫu của tôi có chúng ràng buộc hai chiều thông qua phạm vi cách ly nhưng điều đó không bắt buộc. Nếu bạn đang sử dụng một phạm vi riêng biệt, bạn có thể truy cập các thuộc tính bằng scope.$eval(attrs.sample)hoặc đơn giản là scope.sample, nhưng chúng có thể không được xác định tại liên kết tùy thuộc vào tình huống của bạn.

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);
            });
        }
    };
});

được dùng như:

<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>

Bạn có thể truyền một đối tượng làm thuộc tính và đọc nó vào lệnh như thế này:

<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);
        }
    };
});

Điều này làm việc cho tôi và tôi nghĩ là phù hợp với HTML5 hơn. Bạn nên thay đổi html của mình để sử dụng tiền tố 'data-'

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

Và trong chỉ thị đọc giá trị của biến:

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

Nếu bạn "yêu cầu" 'exampleDirective' từ một lệnh khác + logic của bạn nằm trong bộ điều khiển 'exampleDirective' (giả sử '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();
});