각도 지시문을 사용하여 함수에 매개 변수를 전달할 수 없음

Question

지시문과 '$ compile'이 각도로 작동하는 방식을 이해하려고하므로 html 버튼을 onclick 함수와 함께 각도 변수에 바인딩하려고합니다.

더 구체적으로 말해서, 버튼을 클릭하면 팝업이 표시되어 일부 텍스트가 표시됩니다.

angular.module("myApp").controller('myController', ['$scope', function ($scope) { 

    $scope.foo = function (input) { 
     alert(input); 
    }; 

    var str = "clicked"; 
    var result = "<button ng-click='foo(str)'>click me</button>"; 
    $scope.test = result; 
} 

: 여기

angular.module("myApp").directive('compile', ['$compile', function ($compile) { 
return function(scope, element, attrs) { 
    scope.$watch(
     function(scope) { 
      return scope.$eval(attrs.compile); 
     }, 
     function(value) { 
      element.html(value); 
      $compile(element.contents())(scope); 
     } 
    )} 
}]); 

그리고 컨트롤러가있다 : 나는 '컴파일'지시어를 정의하는 방법

다음

<div compile="test"></div> 

은 다음과 같습니다

는 (가능한 한 간단하게) 내 HTML입니다

위의 코드가 작동하지 않으면 경고에 '정의되지 않음'이 표시됩니다. 대신 다음을 수행하면 작동합니다.

var result = "<button ng-click='foo(\"clicked\")'>click me</button>"; 

내가 누락 된 아이디어가 있습니까? 함수 foo에 매개 변수를 전달하려면 어떻게해야합니까?

미리 감사드립니다.

Answer 1

나는이 경우 추측 : 당신이 문자열 인수처럼 통과하기 때문에 당신이 얻을 경고에

var result = "<button ng-click='foo(\"clicked\")'>click me</button>"; 

는 "클릭".

var result = "<button ng-click='foo(str)'>click me</button>"; 

-이 경우 str은 str 변수로 인식되지 않습니다.

자신의 방법으로 그것을 사용하려고 :

var result = "<button ng-click='foo(\"" + str + "\")'>click me</button>". 

Answer 2

귀하의 예제에서이 요소에 JS 클릭 이벤트를 기다리고, 이벤트 루프 스택에 삽입 NG를 클릭합니다. 해당 함수가 실행되면 ng-click 지시문이 각도 범위로 실행되고 요소가에 속하며 str 변수가 범위에 할당되지 않습니다. var str = "clicked";을 사용하면 st은 myController의 익명 함수 내에서 개인 변수입니다.

app.controller('myController', ['$scope', function ($scope) { 

    $scope.foo = function (input) { 
    alert(input); 
    }; 

    $scope.str = "clicked"; 
    var result = "<button ng-click='foo(str)'>click me</button>"; 
    $scope.test = result; 
}]); 

을하지만,이 범위 변수의 실행 때까지 수정 될 수 있음을 염두에 두어야 : 가장 쉬운 해결책은 범위에 STR을 설정됩니다.

는

plunker : http://plnkr.co/edit/HJCprBRmatl5ikRCJXWx?p=preview