Запуск функции с ngClick внутри ngTransclude

Question

У меня есть неупорядоченный список, в котором четыре элемента массива загружаются с помощью ngRepeat. Якорная метка в элементе списка имеет функцию в атрибуте ngClick, которая запускает сообщение. Вызов функции хорошо работает, когда используется как это:

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

Я создал простую директиву для вставки неупорядоченных списков элементов списка. Список загружен просто отлично, но тот же самый функционал, о котором я упоминал ранее, не запускается. Код выглядит следующим образом:

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

Вот мой яваскрипт и angularjs код:

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

}; 

}); 

У меня также есть plnkr в случае, если вы хотите увидеть, что я пытался сделать: http://plnkr.co/edit/ycaAUMggKZEsWaYjeSO9?p=preview

Спасибо за любую помощь.

Answer 1

Я получил plunkr работу. Я не уверен, что это именно то, что вы ищете. Я скопировал основные изменения кода ниже.

Вот plunkr:

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

Измененная директива будет выглядеть так:

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 пытались использовать функцию, определенную в вашем контроллере, в изолированной области действия директивы, поэтому она не работала - эта функция не указана в директиве. Итак, что я сделал, был добавлен еще один параметр в директиву, которая принимает привязку метода (я думаю, это то, что называется) с помощью «&».

Итак, в основном вы передаете свой метод контроллера в директиву, и этот метод вызывается, но вы хотите по определенному директивой методу I, творчески названному «dirFn». Я не знаю, насколько это лучший способ, но я использовал его в существующем проекте с хорошими результатами;)

Answer 2

вам нужно передать функцию в директиве

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

Answer 3

ng-repeat внутри шаблона директивы вставить новую область и для работы требуется перевести функцию interclude funcion. Я предлагаю удалить нг-повторить и сделать перенаправление вручную пропусканием копию области контроллера и установки элемента на каждом экземпляре:

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: $transcludeFn