각도 지시어는 지시어의 속성에 지정된 식에 있는 함수에 인수를 전달할 수 있습니까?

각도 지시어는 지시어의 속성에 지정된 식에 있는 함수에 인수를 전달할 수 있습니까?

는 지정된 하고 있습니다.callback" " " 리리를리위를 。

scope: { callback: '&' }

은 내 an ng-repeat 표현에는 '우리'가 포함되어 있습니다.id콜백 함수에 대한 인수로 오브젝트를 지정합니다.

<directive ng-repeat = "item in stuff" callback = "callback(item.id)"/>

「 」가 됩니다.$scope.callback()이치노 이 가 하고 이지만, 이 또 때가 있습니다.그것만이 제가 하고 싶은 일입니다만, 때때로 저는 내부로부터 다른 주장을 추가하고 싶습니다.directive그 자체입니다.

하게 하는 ?$scope.callback(arg2)그 「」가 됩니다.callback을 받다arguments = [item.id, arg2]

그렇지 않은 경우 가장 깔끔한 방법은 무엇입니까?

이렇게 하면 효과가 있습니다.

<directive 
  ng-repeat = "item in stuff" 
  callback = "callback" 
  callback-arg="item.id"/>

와 함께

scope { callback: '=', callbackArg: '=' }

지시적 호출이 있습니다.

$scope.callback.apply(null, [$scope.callbackArg].concat([arg2, arg3]) );

하지만 특별히 깔끔하다고 생각하지 않고 격리 범위에 추가 내용을 넣어야 합니다.

더 좋은 방법이 있을까요?

여기 플런커 놀이터(콘솔이 열려 있음)

@lex82에서 언급한 바와 같이 콜백을 선언한 경우

callback = "callback(item.id, arg2)"

오브젝트 맵을 사용하여 디렉티브스코프의 콜백 메서드를 호출하면 바인딩이 올바르게 실행됩니다.맘에 들다

scope.callback({arg2:"some value"});

102달러 필요 없습니다.my feelin (오디오 로그)를 참조해 주세요.

업데이트: 이 문서의 간단한 예가 있습니다.

& 또는 &attr - 부모 범위의 컨텍스트에서 식을 실행하는 방법을 제공합니다.속성 이름이 지정되지 않은 경우 속성 이름은 로컬 이름과 동일한 것으로 간주됩니다.범위 정의 {localFn:'&myAttr'}을(를) 지정하면 분리 범위 속성 localFn이 개수 = + 값 식에 대한 함수 래퍼를 가리킵니다.독립 스코프에서 식을 통해 부모 스코프로 데이터를 전달하는 것이 바람직합니다.이것은 로컬 변수 이름과 값의 맵을 식 래퍼 fn에 전달함으로써 실행할 수 있습니다.예를 들어 식이 increment(금액)인 경우 localFn을 localFn({금액: 22})으로 호출하여 금액 값을 지정할 수 있습니다.

다른 답변에는 문제가 없지만, 지시 속성으로 함수를 전달할 때는 다음 기술을 사용합니다.

html에 지시문을 포함할 때는 괄호를 생략합니다.

<my-directive callback="someFunction" />

그런 다음 지시문 링크 또는 컨트롤러의 기능을 "해동"합니다.다음은 예를 제시하겠습니다.

app.directive("myDirective", function() {

    return {
        restrict: "E",
        scope: {
            callback: "&"                              
        },
        template: "<div ng-click='callback(data)'></div>", // call function this way...
        link: function(scope, element, attrs) {
            // unwrap the function
            scope.callback = scope.callback(); 

            scope.data = "data from somewhere";

            element.bind("click",function() {
                scope.$apply(function() {
                    callback(data);                        // ...or this way
                });
            });
        }
    }
}]);    

"unwraping" 단계에서는 보다 자연스러운 구문을 사용하여 함수를 호출할 수 있습니다.또한 함수를 통과할 수 있는 다른 지시문에 중첩되어 있는 경우에도 지시문이 올바르게 작동하도록 보장합니다.포장을 해제하지 않은 경우 다음과 같은 시나리오가 있습니다.

<outer-directive callback="someFunction" >
    <middle-directive callback="callback" >
        <inner-directive callback="callback" />
    </middle-directive>
</outer-directive>

그 후, 이너 디렉티브에서는 다음과 같은 결과가 됩니다.

callback()()()(data); 

다른 네스팅 시나리오에서는 실패할 수 있습니다.

http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-3-isolate-scope-and-function-parameters의 Dan Wahlin의 훌륭한 기사에서 이 기술을 채택했습니다.

저는 함수 호출을 보다 자연스럽게 하고 프로젝트에서 겪었던 네스팅 문제를 해결하기 위해 언랩핑 단계를 추가했습니다.

지시(myDirective):

...
directive.scope = {  
    boundFunction: '&',
    model: '=',
};
...
return directive;

디렉티브 템플릿:

<div 
data-ng-repeat="item in model"  
data-ng-click='boundFunction({param: item})'>
{{item.myValue}}
</div>

소스:

<my-directive 
model='myData' 
bound-function='myFunction(param)'>
</my-directive>

...어디에myFunction는 컨트롤러에 정의되어 있습니다.

주의:param명령어 템플릿은 깔끔하게 결합됩니다.param소스로 설정되어 있습니다.item.

---

내부에서 호출하다link지시("지시"의 속성), 매우 유사한 접근방식을 사용한다.

...
directive.link = function(isolatedScope) {
    isolatedScope.boundFunction({param: "foo"});
};
...
return directive;

네, 더 좋은 방법이 있습니다.지시문에 있는 $parse 서비스를 사용하여 부모 스코프의 컨텍스트에서 식을 평가하면서 표현식의 특정 식별자를 지시문 내에서만 볼 수 있는 값에 바인딩할 수 있습니다.

$parse(attributes.callback)(scope.$parent, { arg2: yourSecondArgument });

이 행을 디렉티브의 속성에 액세스할 수 있는 디렉티브의 링크 함수에 추가합니다.

그러면 콜백 속성을 다음과 같이 설정할 수 있습니다.callback = "callback(item.id, arg2)"arg2는 디렉티브 내의 $parse 서비스에 의해 yourSecondArgument에 바인딩되어 있기 때문입니다.다음과 같은 지시사항ng-click를 통해 클릭 이벤트에 액세스할 수 있습니다.$event이 메커니즘을 사용하여 지시문에 전달되는 식 내의 식별자입니다.

주의해 주세요.callback이 솔루션을 사용하여 격리된 범위의 멤버를 선택할 수 있습니다.

다음 작업을 수행했습니다.

다음과 같이 선언합니다.

.directive('myDirective', function() {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            myFunction: '=',
        },
        templateUrl: 'myDirective.html'
    };
})  

지시 템플릿에서는 다음 방법으로 사용합니다.

<select ng-change="myFunction(selectedAmount)">

그런 다음 디렉티브를 사용할 때는 다음과 같이 함수를 전달합니다.

<data-my-directive
    data-my-function="setSelectedAmount">
</data-my-directive>

함수를 선언으로 전달하면 디렉티브에서 호출되고 파라미터가 입력됩니다.

언급URL : https://stackoverflow.com/questions/19889615/can-an-angular-directive-pass-arguments-to-functions-in-expressions-specified-in