CODEWITHSUNDEEP
javascriptangularjsjquery-dialog
Ravi
Ravi

Reputation: 2464

Jquery Dialog not populated using Angular scope

The below code does not seem to work when the dialog is launched for the first time.

        $scope.ke_location_channel_summary = function (region_id, region) {

        $scope.region_data = $scope.location_channel_data[region_id];

            killed_enquiries_services.open_dialog('popup', region);
            $('#popup').html($('#location_channel_summary').html());

    };

But it works with the below change

        $scope.ke_location_channel_summary = function (region_id, region) {

        $scope.region_data = $scope.location_channel_data[region_id];

        window.setTimeout(function () {
            killed_enquiries_services.open_dialog('popup', region);
            $('#popup').html($('#location_channel_summary').html());
        }, 0);
    };

The HTML side of the code is 

<div id="location_channel_summary" style="display: none">
<table class="standardTable">
    <tr>
        <th class="left-col-heading">Channel</th>
        <th class="center">Qty</th>
        <th class="center">Nights</th>
        <th class="center">Value</th>
        <th class="center">Avg Value</th>
        <th class="center">ADR</th>
    </tr>
    <tr ng-repeat="ctype in contacttypes | orderBy:['sort_order']">
        <td style="width:25%;" class="left-col-td">{{ctype.name}}</td>
        <td ng-repeat="column in columns" class="center">{{region_data[ctype.id][column]}}</td>

    </tr>
</table>

I'm trying to display the div content on the Jquery Dialog. The table is returned with blank content without the setTimeOut. Why is this so ?

Upvotes: 0

Views: 81

Answers (2)

Okazari
Okazari

Reputation: 4597

You should never try to deal with Jquery within angular. I would recommend to build Dialog via ui.boostrap module.

You're facing this trouble cause angular don't do "everything" immediatly. It have to run multiple digest to render the final page ... but Jquery have no clue about it and launch his function before angular has finished to generate the page.

$('#popup').html($('#location_channel_summary').html());

This is happening before angular has interpolated this part 

<tr ng-repeat="ctype in contacttypes | orderBy:['sort_order']">
    <td style="width:25%;" class="left-col-td">{{ctype.name}}</td>
    <td ng-repeat="column in columns" class="center">{{region_data[ctype.id][column]}}</td>

</tr>

The HTML is probably blank for a ng-repeat on the firsts digest so you're adding a pop up without this part. Then angular interpret it and generate it. But you've already copied the not fully generated HTML.

Upvotes: 1

POZ
POZ

Reputation: 591

That is probably because the AngularJS watcher is asynchronous and takes some time to resolve the {{ctype.name}} and {{region_data[ctype.id][column]}} expressions.

Upvotes: 1

Related Questions