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 ?

Answer 1

这可能是因为AngularJS监视程序是异步的，并且花费一些时间来解析{{ctype.name}}和{{region_data[ctype.id][column]}}表达式。

Answer 2

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.