Jquery Dialog not populated using Angular scope

Question

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 ?

POZ · Accepted Answer · 2015-07-21 13:08:30Z

1

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.

answered Jul 21, 2015 at 13:08

POZ

5914 silver badges11 bronze badges

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

Comments

Okazari · Accepted Answer · 2015-07-21 13:14:24Z

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.

Collectives™ on Stack Overflow

Jquery Dialog not populated using Angular scope

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related