반응형
여러 인수로 함수를 바인딩하는 AngularJS 디렉티브
명령어에 콜백 함수와 컨트롤러에 정의된 함수를 바인딩하는 데 문제가 있습니다.코드는 다음과 같습니다.
내 컨트롤러:
$scope.handleDrop = function ( elementId, file ) {
console.log( 'handleDrop called' );
}
그럼 내 지시사항:
.directive( 'myDirective', function () {
return {
scope: {
onDrop: '&'
},
link: function(scope, elem, attrs) {
var myFile, elemId = [...]
scope.onDrop(elemId, myFile);
}
} );
그리고 내 html 페이지:
<my-directive on-drop="handleDrop"></my-directive>
위의 코드를 사용할 수 없습니다.다양한 튜토리얼에서 읽은 내용으로는 HTML 페이지에서 인수를 지정해야 한다고 알고 있습니다.
최소화를 지속할 수 있는 대체 방법
html을 그대로 둡니다.
<my-directive on-drop="handleDrop"></my-directive>
콜을 다음으로 변경합니다.
scope.onDrop()('123','125')
다음에 추가 개폐 괄호를 붙입니다.onDrop그러면 함수의 코드를 삽입하는 대신 함수가 인스턴스화됩니다.
왜 더 좋은가
에서 파라미터 이름 변경
handleDrop()definition(또는 올바르게 처리한 경우에는 더 추가)은 html.much DRYer의 각 지시 주입을 변경하지 않습니다.@TrueWill의 제안대로라면 다른 솔루션은 최소화를 유지하지 못할 것이라고 확신합니다.이렇게 하면 코드는 최대한의 유연성을 유지하며 이름에 구애받지 않습니다.
또 다른 개인적인 이유는 오브젝트 구문입니다.그러면 코드를 더 많이 쓸 수 있게 됩니다.
functionName({xName: x, yName: y}) // (and adding the function signature in every directive call)
와는 반대로
functionName()(x,y) // (zero maintenance to your html)
나는 여기서 이 훌륭한 해결책을 찾았다.
코드에 작은 오류가 하나 있습니다. 아래 코드를 사용해 보십시오. 그러면 잘 될 것입니다.
<!doctype html>
<html ng-app="test">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
</head>
<body ng-controller="test" >
<!-- tabs -->
<div my-directive on-drop="handleDrop(elementId,file)"></div>
<script>
var app = angular.module('test', []);
app.directive('myDirective', function () {
return {
scope: {
onDrop: '&'
},
link: function (scope, elem, attrs) {
var elementId = 123;
var file = 124;
scope.onDrop({elementId:'123',file:'125'});
}
}
});
app.controller('test', function ($scope) {
alert("inside test");
$scope.handleDrop = function (elementId, file) {
alert(file);
}
});
</script>
</body>
</html>
언급URL : https://stackoverflow.com/questions/18973507/angularjs-directive-binding-a-function-with-multiple-arguments
반응형
'source' 카테고리의 다른 글
| MongoDB 데이터 디렉토리 /data/db를 찾을 수 없습니다. (0) | 2023.03.23 |
|---|---|
| 주문 속성에 직접 액세스하지 마십시오(WooCommerce 3.0). (0) | 2023.03.23 |
| 스프링 데이터 JPA를 사용하여 열 하나를 선택합니다. (0) | 2023.03.23 |
| GROUP BY는 어떻게 작동합니까? (0) | 2023.03.23 |
| 자동으로 WordPress 표시 중지자동으로 WordPress 표시 중지태그태그 (0) | 2023.03.23 |