[angularjs] AngularJS-함수를 지시문에 전달
angularJS 예제가 있습니다.
<div ng-controller="testCtrl">
<test color1="color1" updateFn="updateFn()"></test>
</div>
<script>
angular.module('dr', [])
.controller("testCtrl", function($scope) {
$scope.color1 = "color";
$scope.updateFn = function() {
alert('123');
}
})
.directive('test', function() {
return {
restrict: 'E',
scope: {color1: '=',
updateFn: '&'},
template: "<button ng-click='updateFn()'>Click</button>",
replace: true,
link: function(scope, elm, attrs) {
}
}
});
</script>
</body>
</html>버튼을 클릭하면 경고 상자가 나타나지만 아무것도 표시되지 않습니다.
누구든지 나를 도울 수 있습니까?
답변
분리 범위 지시문 내부에서 상위 범위의 컨트롤러 함수를 호출하려면 dash-separatedOP와 같이 HTML에서 속성 이름을 사용하십시오.
또한 함수에 매개 변수를 보내려면 객체를 전달하여 함수를 호출하십시오.
<test color1="color1" update-fn="updateFn(msg)"></test>JS
var app = angular.module('dr', []);
app.controller("testCtrl", function($scope) {
$scope.color1 = "color";
$scope.updateFn = function(msg) {
alert(msg);
}
});
app.directive('test', function() {
return {
restrict: 'E',
scope: {
color1: '=',
updateFn: '&'
},
// object is passed while making the call
template: "<button ng-click='updateFn({msg : \"Hello World!\"})'>
Click</button>",
replace: true,
link: function(scope, elm, attrs) {
}
}
});답변
아마도 뭔가 빠졌지 만 다른 솔루션은 부모 범위 함수를 호출하지만 지시문 코드에서 인수를 전달할 수는 없습니다 . 예를 들어 고정 매개 변수 update-fn로 호출 하기 때문 입니다. 약간의 변경으로 지시어가 인수를 전달할 수 있습니다.updateFn(){msg: "Hello World"}
<test color1="color1" update-fn="updateFn"></test>HTML은 함수 참조, 즉 ()대괄호 없이 전달합니다 .
JS
var app = angular.module('dr', []);
app.controller("testCtrl", function($scope) {
$scope.color1 = "color";
$scope.updateFn = function(msg) {
alert(msg);
}
});
app.directive('test', function() {
return {
restrict: 'E',
scope: {
color1: '=',
updateFn: '&'
},
// object is passed while making the call
template: "<button ng-click='callUpdate()'>
Click</button>",
replace: true,
link: function(scope, elm, attrs) {
scope.callUpdate = function() {
scope.updateFn()("Directive Args");
}
}
}
});따라서 위의 HTML에서 로컬 범위 callUpdate함수를 호출 하면 부모 범위에서 updateFn을 ‘페치’하고 지시문이 생성 할 수있는 매개 변수를 사용하여 리턴 된 함수를 호출합니다.
답변
‘test’지시문 Html 태그에서 함수의 속성 이름은 camelCased가 아니라 대시 기반 이어야합니다 .
그래서-대신 :
<test color1="color1" updateFn="updateFn()"></test>쓰다:
<test color1="color1" update-fn="updateFn()"></test>지시문 속성 (예 : update-fn 함수)과 함수의 차이점을 알려주는 각도 방식입니다.
답변
양방향 바인딩으로 컨트롤러 기능을 전달하는 것은 어떻습니까? 그런 다음 일반 템플릿과 동일한 방식으로 지시문에서 사용할 수 있습니다 (간단 성을 위해 관련이없는 부분은 제거했습니다)
<div ng-controller="testCtrl">
<!-- pass the function with no arguments -->
<test color1="color1" update-fn="updateFn"></test>
</div>
<script>
angular.module('dr', [])
.controller("testCtrl", function($scope) {
$scope.updateFn = function(msg) {
alert(msg);
}
})
.directive('test', function() {
return {
scope: {
updateFn: '=' // '=' bidirectional binding
},
template: "<button ng-click='updateFn(1337)'>Click</button>"
}
});
</script>위의 방법을 시도했기 때문에이 질문에 착륙했지만 어떻게 든 작동하지 않았습니다. 이제 완벽하게 작동합니다.
답변
속성 이름에 대시와 소문자를 사용하십시오 (다른 답변이 말했듯이).
<test color1="color1" update-fn="updateFn()"></test>지시문 범위에서 “&”대신 “=”를 사용하십시오.
scope: { updateFn: '='}그런 다음 다른 함수와 마찬가지로 updateFn을 사용할 수 있습니다.
<button ng-click='updateFn()'>Click</button>당신은 간다!
답변
작동하지 않기 때문에 “&”대신 “=”바인딩을 사용해야했습니다. 이상한 행동.
답변
@JorgeGRC 답변 주셔서 감사합니다. 그러나 “아마도”부분이 매우 중요합니다. 매개 변수가있는 경우 템플릿에도 매개 변수를 포함시키고 지역 을 지정해야합니다 ( 예 🙂 updateFn({msg: "Directive Args"}.
