새 범위를 만들지 않고 지시 템플릿으로 변수 전달

새 범위를 만들지 않고 지시 템플릿으로 변수 전달

새로운 스코프를 작성하지 않고 Atribute를 사용하여 변수를 디렉티브에 전달할 수 있는 방법이 있습니까?

HTML

<div ng-click='back()' button='go back'></div>

JS

.directive('button', function () {
    return {
        scope: {
            button: '@'
        },
        template: "<div><div another-directive></div>{{button}}</div>",
        replace: true
    }
})

문제는 이 시스템이ng-click='back()'이제 지시 범위를 참조합니다.아직 할 수 있다ng-click='$parent.back()'내가 원하는 건 그게 아니야

기본적으로 지시문은 새 범위를 생성하지 않습니다.이를 명확하게 하고 싶다면scope: false지시사항을 따르겠습니다.

<div ng-click='back()' button='go back!'></div>

angular.module('myApp').directive("button", function () {
    return {
        scope: false,  // this is the default, so you could remove this line
        template: "<div><div another-directive></div>{{button}}</div>",
        replace: true,
        link: function (scope, element, attrs) {
           scope.button = attrs.button;
        }
    };
});

fiddle

새로운 소유지이기 때문에button는 스코프에 작성되고 있습니다.일반적으로 다음 명령을 사용하여 새로운 자 스코프를 작성해야 합니다.scope: true@paramum-c가 대답한 것처럼.새로운 스코프는 상위 스코프로부터 프로토타입으로 상속됩니다.이 때문에,$parent.back()HTML로 변환합니다.

또 하나 언급해야 할 것은, 델이 사용하고 있는replace: true, 요소를 클릭해도 호출이 계속됩니다.back()이 방법은 "치환 프로세스가 모든 속성/클래스를 이전 요소에서 새 요소로 마이그레이션합니다." -- directive doc.
그렇게ng-click='back()' button='go back!'첫 번째 로 이행됩니다.div명령어 템플릿에 있습니다.

이 경우 컴파일 기능을 사용해야 할 것 같습니다.

angular.module('myApp').directive("button", function () {
    return {
        template: "<div><div another-directive></div>{{button}}</div>",
        replace: true,
        scope:   true,
        compile: function (tElement, tAttrs) {
            // this is link function
            return function (scope) {
                scope.button = tAttrs.button;
            };            
        }
    };
});

다음은 jsfiddle의 예입니다.

언급URL : https://stackoverflow.com/questions/16561229/passing-variable-to-directive-template-without-creating-new-scope