Angular JS: While adding new html content through controller the ng-click does not work

Question

I have been working on a project where using angular js Html content has to be appended to a div but the ng-click doesn't work using this approach. I have googled up a lot of things. Also tried using $compile before appending the Html to the div but sadly no luck.

Please take a look at the code below and let me know if there is anything that can help.

 <div id="tileLayout" style="width: 198px; height: 173px;" ng-controller="TileController" ng-init="init(1000,@ViewBag.Index, 'UTILTS')" ng-click="openTab('UTILTS.TABVIEW.TABTITLE',param = { id:@ViewBag.Index, status:'', titleStatic: '@ViewBag.Direction' })">
<div style="height: 35px;"><span class="text-left"><img src="@Url.Content("~/Images/Icons/utilts_icon.png")" alt="" style="width: 35px; height: 35px;"></span><span class="text-center">&nbsp;&nbsp;{{data.title}}</span></div>
<div>
    <div style="padding-top: 3px; padding-bottom: 3px;"><span class="text-left" style="font-size: 10px;">{{(data.title1 | translate) || "N/A"}}</span><span class="pull-right" style="font-size: 10px;">{{data.loaded}}/{{data.loadedTotal}}</span></div>
    <input type="hidden" ng-model="data.param1" />
        <div id="progressbar1" kendo-progress-bar="progressBar" class="progressBar" style="font-size: 10px;" k-min="0" k-max="100" ng-click="openTab('UTILTS.TABVIEW.TABTITLE', param = {id:@ViewBag.Index, status:data.param1})" stop-click-event></div>
</div><div>

The app.js consist of the code for appending html code to the div

  var elem = $("<div id=\"tileInstance_" + tileId + "\" class=\"item w2 h2\" ng-click=\"alert('moi')\">" +
                        "<div class=\"dashboard_tile\" style=\"height: 25px;\">" +
                        "<div>" +
                        "<div class=\"dashboard_tile title\">{{'TILE.COMPANY_SELECTION' | translate}}</div>" +
                        "<div style=\"float:right; display:inline-block;\" class='ui-icon ui-icon-closethick ui-removable-tile' popover=\"{{'TILE.REMOVE_TOOLTIP' | translate}}\" popover-trigger=\"mouseenter\" popover-placement=\"top\"></div>" +
                        "<div style=\"float:right; display:inline-block;\" class='ui-icon ui-icon-gear ui-configurable-tile' ng-click=\"openConfig(id = " + tileId + ", '" + tiledata.prefix + "')\" popover=\"{{'TILE.CONFIGURE_TOOLTIP' | translate}}\" popover-trigger=\"mouseenter\" popover-placement=\"top\"></div>" +
                        "</div>" +
                        "</div>" +
                        "<div>" +
                        data +
                        "</div>" +
                        "</div>");

                        //console.log("Packery container: " + $rootScope.container['tab-' + tiledata.tabId]);

                        var $items = $compile(elem)($scope);
                        $rootScope.container['tab-' + tiledata.tabId].append($items);
                        $rootScope.container['tab-' + tiledata.tabId].packery('appended', $items);

                        //service.InitializeTiles(tiledata.tabId);

                        $rootScope.container['tab-' + tiledata.tabId].packery();

                        service.InitializeTiles(tiledata.tabId);
                        service.InitializeTabs(tiledata.tabId);

I have used container to append the html code to packery. The div does get appended to the container/div but the ng-click does not work. I have also tried using normal $("#id").append($items) but no luck with it either.

It seems you are using a combination of JQuery and Angular. I’m not sure if this is the right approach to be taking. Can you post the code for your openTab() function? Also take a look at this http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background could be useful. — BobDoleForPresident, Apr 10 '15 at 12:31
Could you please make sure that you are injecting the correct scope to this module? asked by @Sagar Wagh — Tharif, Apr 13 '15 at 06:30

score 0 · Accepted Answer · edited Apr 13 '15 at 07:14

0

Looking at your code, one reason that it is not working could be compiling your html with incorrect $scope.

edited Apr 13 '15 at 07:14

Tharif

13,794
9
55
77

answered Apr 13 '15 at 06:13

Sagar Wagh

16

post doubts in comments – Tharif Apr 13 '15 at 06:21
@utility I tried posting doubts in comments, but it does not allow me and displays "You must have 50 reputation to comment". Not sure if there is any other way to add comment directly to question. Please support for the same. – Sagar Wagh Apr 13 '15 at 06:27

Angular JS: While adding new html content through controller the ng-click does not work

1 Answers1