Ionic + Angular ng-click not bind function from dynamic html element

Question

I have an ion-list and I create each ion-item from a select statment. The ion-item tag has a ng-click event that call a modal window but it never call the show() method from controller. For test I put a static ion-item without DOM modification and it works well.

This is the code:

Modal controller

function uib_w_27_modal_controller($scope, $ionicModal) {
  $scope.modal = $ionicModal.fromTemplate($(".uib_w_27").html(), {
    scope: $scope,
    animation: 'slide-in-up'
  });
  $scope.show = function() {
    $scope.modal.show();
  };
  $scope.close = function() {
    $scope.modal.hide();
  };
  //Cleanup the modal when we're done with it!
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });
  // Execute action on hide modal
  $scope.$on('modal.hidden', function() {
    // Execute action
  });
  // Execute action on remove modal
  $scope.$on('modal.removed', function() {
    // Execute action
  });
};

Dynamic element

function getFarmaciasSelect(tx, result){
    var elem = '';
    for (var i = 0; i < result.rows.length; i++) {
        var row = result.rows.item(i);
        elem += '<ion-item class="item widget uib_w_24 d-margins item-avatar item-icon-right" data-uib="ionic/list_item_avatar" data-ver="0">' +
                            '<img src="images/Strabburg.jpg">' +
                            '<h2>' + row['nombre'] + '</h2>' +
                            '<p>' + row['calle'] + ' ' + row['altura'] + '</p>' +
                            '<a href="tel:' + row['fijo'] + '"style="text-decoration:none;color:#4CAF50" >' + row['fijo'] + '</a>' +
                            '<i class="icon ion-plus-circled ion" uib-icon-position="right" ng-controller="uib_w_27_modal_controller" ng-click="show()" data-email="[email protected]"></i>' +
                 '</ion-item>';
            console.log(elem); 
    }
    $('#farmacias-list').html(elem);
}

Thanks for help!

Could you post a fiddle? And a second thing: Why aren't you doing the dynamic-element-part with a ng-repeat in your html? — Argee
– Argee, Commented Jun 3, 2016 at 21:44

Vu Quyet · Accepted Answer · 2016-06-04 01:03:33Z

1

If you really need to keep generating in your code then you need compile your content before add to '#farmacias-list'

$('#farmacias-list').html($compile(elem)($scope));

but even it work, I will recommend you to use collection-repeat to generate content in angular context.

answered Jun 4, 2016 at 1:03

Vu Quyet

1,7051 gold badge16 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Ionic + Angular ng-click not bind function from dynamic html element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related