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

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

---

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

scope: { callback: '&' }

내부에 앉아 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"});

$ 구문 분석이 필요하지 않습니다. 내 바이올린 (콘솔 로그) 참조 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); 

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

I adapted this technique from an excellent article by Dan Wahlin at http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-3-isolate-scope-and-function-parameters

I added the unwrapping step to make calling the function more natural and to solve for the nesting issue which I had encountered in a project.

---

In directive (myDirective):

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

In directive template:

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

In source:

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

...where myFunction is defined in the controller.

Note that param in the directive template binds neatly to param in the source, and is set to item.

---

To call from within the link property of a directive ("inside" of it), use a very similar approach:

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

---

Yes, there is a better way: You can use the $parse service in your directive to evaluate an expression in the context of the parent scope while binding certain identifiers in the expression to values visible only inside your directive:

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

Add this line to the link function of the directive where you can access the directive's attributes.

Your callback attribute may then be set like callback = "callback(item.id, arg2)" because arg2 is bound to yourSecondArgument by the $parse service inside the directive. Directives like ng-click let you access the click event via the $event identifier inside the expression passed to the directive by using exactly this mechanism.

Note that you do not have to make callback a member of your isolated scope with this solution.

---

For me following worked:

in directive declare it like this:

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

In directive template use it in following way:

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

And then when you use the directive, pass the function like this:

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

You pass the function by its declaration and it is called from directive and parameters are populated.

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