Make ng-click work on WebDB rendered

Question

I have a that renders data from my localstorage. These lines have a Edit function. These brings them to another page. The ng-click function on this link isn't fireing when it is clicked.

The HTML:

<body ng-app="animateApp" ng-controller="appBody" onload="init()">    
<ul id="events-list">
    </ul>
</body>

The Javascript function that renders the data:

function renderEvent(row) {
    return "<li>" + row.title
                  + " [<a href='javascript:void(0);'  onclick='html5rocks.webdb.deleteEvent(" + row.ID +");'>Delete</a>]"
                  + " [<a ng-click='sayHello()' href='#event-edit?eventname=" + row.title + "&eventid=" + row.ID + "'>Edit</a>]</li>";
}

The sayHello() function:

function appBody($scope) {

    $scope.sayHello = function() {
        setTimeout(function(){
            alert('function runned');

            var eventname            = 'Foo';
            var eventid              = '1';

            $scope.editEventName        = eventname;
            $scope.editEventId          = eventid;
        },1);

    };
}

How do i get the function fired? When i call the same function outside of the UL it will fire without a problem.

Please provide a complete html code. I cannot see any ng-clicks in the example you pasted here. — Yauheni Leichanok, Mar 17 '14 at 10:45

score 0 · Answer 1 · edited May 23 '17 at 12:14

You can build a scope array that can hold all your rows and then render the links using angular:

$scope.rows = yourGetRowsFunctionCall(); //this method can be in an angular service

and then in the html you can use:

<body ng-app="animateApp" ng-controller="appBody" onload="init()">    
  <ul id="events-list">
    <li ng-repeat="row in rows">{{row.title}}
       <a href="javascript:void(0);"  onclick="html5rocks.webdb.deleteEvent({{row.ID}})">Delete</a>
       [<a ng-click="sayHello()" href="#event-edit?eventname={{row.title}}&eventid={{row.ID}}">Edit</a>]
    </li>
  </ul>
</body>

Also you can take a look at ng-click doens't work on dynamic DOM AngularJS? post that states and I quote: you're not fully embracing Angular philosophy if you're manipulating the DOM through Angular-external means.

Make ng-click work on WebDB rendered

1 Answers1