각도 지시문이 지시문 속성에 지정된 표현식의 함수에 인수를 전달할 수 있습니까?

callback격리 범위와 함께 지정된 특성 을 사용하는 양식 지시문이 있습니다 .

scope: { callback: '&' }

그것은 내부 앉는 ng-repeatI 안으로 통과 발현되도록이 포함 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"});

$ 구문 분석이 필요하지 않습니다. 내 바이올린 (콘솔 로그) 참조 http://jsfiddle.net/k7czc/2/

업데이트 : 설명서 에 작은 예가 있습니다 .

& 또는 & attr-상위 범위의 컨텍스트에서 표현식을 실행하는 방법을 제공합니다. attr 이름이 지정되지 않으면 속성 이름이 로컬 이름과 동일한 것으로 간주됩니다. 범위의 위젯 정의 {localFn : '& myAttr'}를 지정하면 격리 범위 특성 localFn은 count = count + value 표현식의 함수 랩퍼를 가리 킵니다. 표현식을 통해 격리 된 범위에서 상위 범위로 데이터를 전달하는 것이 바람직한 경우가 종종 있는데, 이는 로컬 변수 이름 및 값의 맵을 표현식 랩퍼 fn에 전달하여 수행 할 수 있습니다. 예를 들어, 표현식이 increment (amount) 인 경우 localFn을 localFn ({amount : 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
                });
            });
        }
    }
}]);    

"unwrapping"단계를 통해보다 자연스러운 구문을 사용하여 함수를 호출 할 수 있습니다. 또한 함수를 전달할 수있는 다른 지시문에 중첩 된 경우에도 지시문이 올바르게 작동합니다. 언 래핑을 수행하지 않은 경우 다음과 같은 시나리오가있는 경우 :

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

그런 다음 내부 지시문에서 다음과 같이 끝납니다.

callback()()()(data); 

다른 중첩 시나리오에서는 실패합니다.

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

함수를보다 자연스럽게 호출하고 프로젝트에서 발생한 중첩 문제를 해결하기 위해 래핑 해제 단계를 추가했습니다.

지시문 ( 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>

선언에 의해 함수를 전달하면 지시문에서 호출되고 매개 변수가 채워집니다.