Angular.js öznitelik yönergesine birden çok özniteliği nasıl iletirim?

Aşağıdaki gibi kısıtlanmış bir öznitelik direktifim var:

 restrict: "A"

İki niteliğe geçmem gerekiyor; bir numara ve bir işlev / geri arama, attrsnesneyi kullanarak yönerge içinde bunlara erişme .

Direktif bir element direktifiyse, bununla sınırlı "E"olabilir:

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

Ancak, girmeyeceğim nedenlerden dolayı yönergenin bir öznitelik yönergesi olmasına ihtiyacım var.

Bir öznitelik yönergesine birden çok özniteliği nasıl aktarırım?

Yönerge, kendisi bir öğe olmasa bile, aynı öğede tanımlanan herhangi bir özniteliğe erişebilir.

Şablon:

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

Direktif:

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

Özniteliğin değeri example-numbersabit kodlanacaksa, bir $evalkez kullanılmasını ve değerin saklanmasını öneririm . Değişken numdoğru türe (bir sayı) sahip olacaktır.

Bunu, bir element direktifinde yaptığınız gibi yaparsınız. Bunları attrs nesnesine sahip olacaksınız, benim örneğim onları izolat kapsamı aracılığıyla iki yönlü bağlamaya sahip ancak bu gerekli değil. İzole edilmiş bir kapsam kullanıyorsanız, özniteliklere kapsam. scope.$eval(attrs.sample)Örnek ile veya basitçe erişebilirsiniz, ancak durumunuza bağlı olarak bağlanmada tanımlanmayabilirler.

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

olarak kullanılır:

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

Bir nesneyi öznitelik olarak iletebilir ve aşağıdaki gibi yönergeye okuyabilirsiniz:

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

Bu benim için çalıştı ve bence daha HTML5 uyumlu. 'Data-' önekini kullanmak için html'nizi değiştirmelisiniz

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

Yönerge içinde değişkenin değerini okuyun:

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

Başka bir yönergeden 'exampleDirective' için "gerekli" iseniz + mantığınız 'exampleDirective'in' kontrolcüsündeyse ("exampleCtrl" diyelim):

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