Programing

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

lottogame 2020. 6. 5. 08:01
반응형

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


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

반응형