Development Tip

Angular : &를 사용하여 지시문 링크 함수 내에서 컨트롤러 함수 호출

yourdevel 2020. 12. 2. 22:05
반응형

Angular : &를 사용하여 지시문 링크 함수 내에서 컨트롤러 함수 호출


지시문의 링크 함수에서 앰퍼샌드 '&'를 사용하여 지시문에 전달 된 함수를 호출하는 데 문제가 있습니다.

컨트롤러에서 함수가 호출 된 것 같지만 호출에서 인수가 전달되지 않습니다. 우리가 본 모든 예제는 템플릿에서 호출을 생성하여 전달하는 것과 관련이 있습니다. 템플릿에서 지시문의 함수를 호출 한 다음 지시문에서 전달 된 컨트롤러 함수를 호출하는 작업을 수행하는 방법이 있습니까?


{}s 내부 인수를 전달하고 있습니까? 예를 들어 지시문의 링크 함수 내에서 다음과 같이 메서드를 호출하고 싶을 것입니다.scope.someCtrlFn({arg1: someValue});

<div my-directive callback-fn="ctrlFn(arg1)"></div>
app.directive('myDirective', function() {
    return {
        scope: { someCtrlFn: '&callbackFn' },
        link: function(scope, element, attrs) {
            scope.someCtrlFn({arg1: 22});
        },
    }
});

function MyCtrl($scope) {
    $scope.ctrlFn = function(test) {
        console.log(test);
    }
}

바이올린 .


Mark의 대답 외에도 &속기를 사용하여 일부 문자를 절약 할 수 있음을 지적하고 싶습니다 . 이것은 callback-fn당신의 HTML 에서 참조되는 것이 당신 scope.callbackFn의 범위에 존재 한다고 가정합니다 . 다른 모든 것은 여전히 ​​동일하므로 변경할 줄은 2 개뿐입니다. 나는 Mark의 버전을 주석으로 보관했기 때문에 차이점을 쉽게 발견 할 수있을 것입니다.

<div my-directive callback-fn="ctrlFn(arg1)"></div>
app.directive('myDirective', function() {
    return {
        scope: { callbackFn: '&' }, //scope: { someCtrlFn: '&callbackFn' },
        link: function(scope, element, attrs) {
            scope.callbackFn({arg1: 22}); //scope.someCtrlFn({arg1: 22});
        },
    }
});

function MyCtrl($scope) {
    $scope.ctrlFn = function(test) {
        console.log(test);
    }
}

참고 URL : https://stackoverflow.com/questions/16839259/angular-calling-controller-function-inside-a-directive-link-function-using

반응형