여러 Atribute를 Angular.js Atribute Directive로 전달하려면 어떻게 해야 하나요?

여러 Atribute를 Angular.js Atribute Directive로 전달하려면 어떻게 해야 하나요?

다음과 같이 제한된 속성 디렉티브가 있습니다.

 restrict: "A"

2개의 Atribute(번호와 함수/콜백)를 전달해야 합니다.이 Atribute는 명령어 내에서attrs물건.

디렉티브가 요소 디렉티브인 경우,"E"나는 이렇게 할 수 있다:

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

다만, 설명하지 않는 이유 때문에, 속성 디렉티브가 되는 디렉티브가 필요합니다.

여러 Atribute를 Atribute Directive로 전달하려면 어떻게 해야 하나요?

디렉티브는 디렉티브 자체가 요소가 아닌 경우에도 동일한 요소에 정의된 모든 Atribut에 액세스할 수 있습니다.

템플릿:

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

지시:

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

Atribute 값인 경우example-number하드코딩이 됩니다.한 번 사용하고, 그 값을 보존하는 것을 추천합니다.변수num올바른 타입(숫자)이 됩니다.

요소 지시와 동일한 방법으로 작업을 수행합니다.이 오브젝트는 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>

오브젝트를 속성으로 전달하고 다음과 같이 디렉티브에 읽어 들일 수 있습니다.

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

이것은 나에게 효과가 있었고 나는 HTML5에 더 적합하다고 생각한다.'data-' 접두사를 사용하도록 html을 변경해야 합니다.

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

지시문 내에서 변수의 값을 읽습니다.

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

다른 디렉티브에서 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();
});

언급URL : https://stackoverflow.com/questions/16546771/how-do-i-pass-multiple-attributes-into-an-angular-js-attribute-directive