Call controller function from HTML dynamically created

Question

I have a controller which have a function called $scope.removePoster and another one inside the same controller who create a table calling $scope.removePoster like this:

for(var i=0; i < 6 && postersNum >= 0; i++){
  ...
  table += '<td align="center">';
  table += '<img width="150" height="175" src="../js/librerias/carousel/images/'+$scope.posters[indexPosters]['image']+'"><br>';
  table += '<button type="button" class="btn btn-danger" ng-click="removePoster('+$scope.posters[indexPosters]['id']+')">Delete</button>';
  table += '</td>';
  ...

When I add this table in my HTML the button doesn't call this function.

Strange, angular and rendering html like that? what purpose for you angular lib? :D — GomatoX
– GomatoX, Commented Jun 9, 2014 at 17:15
Setup a demo, so it is easier for us to help. Use this to start: jsfiddle.net/joshdmiller/HB7LU — Matt Way
– Matt Way, Commented Jun 9, 2014 at 17:16
+1 to the @Gomatox comment. Is there any reason why the dom element is created in js when angular provides a nice and more elegant way of doing using ng-repeat — guru
– guru, Commented Jun 9, 2014 at 17:17

gkalpak · Accepted Answer · 2014-06-09 19:04:03Z

Sounds like you are using for something like this:

<!-- HTML -->
<table>
    <tr ng-repeat="poster in posters | limitTo: 6">
        <td align="center">
            Poster {{poster.id}}
            <img width="15" height="18" 
                 ng-src="../js/librerias/carousel/images/{{poster.image}}" />
            <button type="button" class="btn btn-danger" 
                    ng-click="removePoster(poster.id)">
                Delete
            </button>
        </td>
    </tr>
</table>

// Controller:
$scope.posters = [];
$scope.getPosters = function (url) {
    $http.post(url, {'method' : 1}).success(function (data, status) {
        $scope.posters = data;
    });  
};
$scope.removePoster = function (id) {
    $scope.posters.some(function (poster, idx) {
        if (poster.id === id) {
            $scope.posters.splice(idx, 1);
            return true;
        }
    });
};

See, also, this short demo.

Some highlights:

By using ngRepeat on the <tr> element, we instruct Angular to create as many tr elements as necessary based on the content of posters (subject to the filtering (see below)).
Angular's built-in limitTo filter, filter's the posters array and makes only the first 6 items available to ngRepeat. Conviniently enough, when the content of the posters array changes (e.g. after removing an entry), the whole expression gets re-evaluated creating or removing DOM nodes as necessary.

IMPORTANT

The implementation above is not the proper way to handle things in all aspects. It is the cleanest/easiset way to allow you to wrap your head around Angular's way of building a table dynamically.

Specifically, in a "real-world app", you should have a service bring the data from the server and inject the service into the controller to let it gain access to the data.

Really thanks for your example, I can see the advantage, I think I'm going to use it. Thanks again for your great explanation.

Collectives™ on Stack Overflow

Call controller function from HTML dynamically created

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related