Note that there are some explanatory texts on larger screens.

plurals
  1. POTriggering a function with ngClick within ngTransclude
    primarykey
    data
    text
    <p>I have an unordered list loaded with four items from an array while using ngRepeat. The anchor tag in the list item has a function in the ngClick attribute that fires up a message. The function call works well when used like this:</p> <pre><code>&lt;ul&gt; &lt;li ng-repeat="n in supsNames"&gt; &lt;a ng-click="myAlert(n.name)"&gt;{{n.name}}&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>I created a simple directive for inserting unordered lists with list items. The list is loaded just fine but the same functioned I previously mentioned does not fire up. The code is as follows:</p> <pre><code>&lt;div list items="supsNames"&gt; &lt;a ng-click="myAlert({{item.name}})"&gt;{{item.name}}&lt;/a&gt; &lt;/div&gt; </code></pre> <p>Here is my javascript and angularjs code:</p> <pre><code>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); } }; }); </code></pre> <p>I also have a plnkr in case you want to see what I tried to do: <a href="http://plnkr.co/edit/ycaAUMggKZEsWaYjeSO9?p=preview" rel="nofollow">http://plnkr.co/edit/ycaAUMggKZEsWaYjeSO9?p=preview</a></p> <p>Thanks for any help.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload