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) {             
        }
    }
});

Fiddle

아마도 뭔가 빠졌지 만 다른 솔루션은 부모 범위 함수를 호출하지만 지시문 코드에서 인수를 전달할 수는 없습니다 . 예를 들어 고정 매개 변수 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을 '페치'하고 지시문이 생성 할 수있는 매개 변수를 사용하여 리턴 된 함수를 호출합니다.

http://jsfiddle.net/mygknek2/

'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"}.