ngTransclude 내의 ngClick을 사용하여 함수 트리거

Question

ngRepeat를 사용하는 동안 정렬에서 4 개의 항목이로드 된 정렬되지 않은 목록이 있습니다. 목록 항목의 앵커 태그에는 ngClick 속성에 메시지를 발생시키는 함수가 있습니다. 함수 호출은 다음과 같이 사용할 때 잘 작동합니다.

<ul> 
    <li ng-repeat="n in supsNames"> 
    <a ng-click="myAlert(n.name)">{{n.name}}</a> 
    </li> 
</ul> 

목록 항목을 순서없이 삽입하는 간단한 지시문을 만들었습니다. 목록은 잘로드되지만 이전에 언급 한 기능과 똑같은 기능은 실행되지 않습니다. http://plnkr.co/edit/ycaAUMggKZEsWaYjeSO9?p=preview

: 나는 또한 당신이 내가하려고 무엇을보고 싶은 경우에 plnkr이

var app = angular.module('myapp', []); 

app.controller('myCtrl', function($scope) { 

$scope.title = 'ngClick within ngTransclude'; 
$scope.supsNames = [ 
    {"name" : "Superman"}, 
    {"name" : "Batman"}, 
    {"name" : "Aquaman"}, 
    {"name" : "Flash"} 
    ]; 

    $scope.myAlert = function(name) { 
    alert('Hello ' + name + '!'); 
    }; 
}); 

app.directive('list', function() { 

return { 

restrict: 'A', 
scope: { 
    items: '=' 
}, 
templateUrl: 'list.html', 
transclude: true, 
link: function(scope, element, attrs, controller) { 
    console.log(scope); 
} 

}; 

}); 

:

여기

<div list items="supsNames"> 
    <a ng-click="myAlert({{item.name}})">{{item.name}}</a> 
</div> 

내 자바 스크립트와 AngularJS와 코드는 다음과 같이 코드는

도움 주셔서 감사합니다.

Answer 1

나는 plunkr의 작업을 얻었다에 기능을 전달해야합니다. 나는 그것이 당신이 찾고있는 것이 맞는지 확실하지 않습니다. 아래에 주요 코드 변경 사항을 복사했습니다. 수정 지시는 이제 다음과 같습니다

http://plnkr.co/edit/GEiGBIMywkjWAaDMKFNq?p=preview

: 여기

는 plunkr의

app.directive('list', function() { 
    return { 
    restrict: 'A', 
    scope: { 
     items: '=', 
     ctrlFn: '&' //this function is defined on controller 
    }, 
    templateUrl: 'list.html', 
    transclude: true, 
    link: function(scope, element, attrs, controller) { 

     //directive fn that calls controller defined function 
     scope.dirFn = function(param) { 
     if(scope.ctrlFn && typeof scope.ctrlFn == 'function') { //make sure its a defined function 
      scope.ctrlFn({'name': param}); //not sure why param has to be passed this way 
     } 
     } 

    } 

    }; 

}); 

그리고 여기가 컨트롤러에 바인딩 된 HTML 파일이라고하는 방법은 다음과 같습니다

<div list items="supsNames" ctrl-fn="myAlert(name)"> 
    <a ng-click="dirFn(item.name)">{{item.name}}</a> 
</div> 

나는 이전에 일어난 일이 y라고 생각합니다. ou는 지시자의 격리 된 범위 내에서 컨트롤러에 정의 된 함수를 사용하려 했으므로 작동하지 않았습니다.이 함수는 지시문에서 정의되지 않았습니다. 그래서 내가 한 것은 메서드 바인딩을 허용하는 지시문에 다른 매개 변수를 추가 한 것입니다. (나는 그것이 호출 된 것이라고 생각합니다) '&'을 사용합니다.

기본적으로 제어기 메소드를 지시문에 전달하고이 메소드는 "dirFn"이라는 창의적으로 명명 된 지시문 정의 메소드에서 원하는대로 호출됩니다. 이 방법이 본질적으로 가장 좋은 방법인지는 모르지만 좋은 결과가있는 기존 프로젝트에서 사용했습니다.)

Answer 2

당신은이 지침

scope: { 
    items: '=', 'myAlert': '=' 
}, 

Answer 3

ng-repeat 지시문 템플릿 안에 새 범위를 삽입하고 수동으로 transclude 함수를 호출해야합니다. 나는 이을 NG-반복하고 트랜스 클루 전 수동으로 제어 범위의 사본을 전달하고 각 사본에 항목을 설정하게 제거 제안 :

for(var i=0,len=scope.items.length;i<len;i++){ 
    var item=scope.items[i]; 
    var itemScope=scope.$parent.$new(); 
    $transcludeFn(itemScope, function (clone,scope) { 
       // be sure elements are inserted 
       // into html before linking 
       scope.item=item; 
       element.after(clone); 
    }); 
    }; 

나는 pluker을 편집하고 나는 그것이 도움이 될 수있는 희망 : http://plnkr.co/edit/97ueb8SFj3Ljyvx1a8U1?p=preview

transclusion에 대한 자세한 내용은 Transclusion: $transcludeFn