对于动态加载的 HTML，$scope 中的数据未加载到 AngularJS 的视图中

Question

我正在选项卡中加载 HTML。在div 中加载 HTML 后。我正在触发控制器。当控制器被触发时，我在控制器中有数据。该数据未填充在 HTML 视图中。是否有任何关于调用控制器或将数据加载到 HTML 中的建议？

 $('<div id = '+ createChannelTabId +'Properties'+ ' ng-controller="channelHomeCtrl" ng-bind="msg"> </div>').appendTo("#" + createChannelTabId);
        $('body').injector().invoke(function ($compile, $rootScope) {
                $compile($("#" + createChannelTabId + "Properties"))($rootScope);
                $rootScope.$apply();
            });
       var modalFieldProperties = $("#" + createChannelTabId + "Properties");
            modalFieldProperties.html(loadHTML("channelHome.html"));
            $("#" + createChannelTabId + "Link")[0].click();
         angular.bootstrap($("#" + createChannelTabId), ['ChannelModule']);

当控制器被调用时，我在控制器内执行此操作

    MDChannelModule.controller('channelHomeCtrl', function ($scope,$http) {
    debugger;
        MDBPMUtils.showWaitCursor();
                $scope.query = {};
                 $scope.queryBy = 'description';
        $scope.items =
            $http.get("/mondrestws/services/binData/getListOfBinDataHeaderWithAccessRights/",{params : {foreignKeyType:"channelJSon"} }).then(function(res){
                            debugger;
                            channelData = res.data;
                if(res.data.length > 0){
                                     document.getElementById("emptyDTImg").style.display = "none";
                            $scope.items = angular.fromJson(res.data); 
                                }else{
                                     $scope.items = {};
                                    document.getElementById("emptyDTImg").style.display = "inline";
                                }
                MDBPMUtils.showDefaultCursor();
            },
            function(data) {
                MDBPMUtils.showMessage(data.status,data);
            });
)}

即使这样，数据也不会在 HTML 中加载

<div ng-controller="channelHomeCtrl">
<div class="infobox infobox-green" id="{{i.binDataId}}" ng-click ="setSectedValue(i)" ng-style="{ 'width' : width}" style=" margin: 5px 5px 0px 5px; padding: 2px 3px 2px 9px; height: 55px; border: 1px solid; border-radius: 8px; " ng-repeat="i in items| filter:query" >
    <div class="infobox-icon">
        <img src="../images/system/decisionTree.png"></img>
    </div>
    <div class="infobox-data">
        <span class="infobox-data-number action-buttons">
            <a style="font-size: 18px;white-space: nowrap;width: 18em;overflow: hidden;text-overflow: ellipsis;" title="{{getChannelName(i)}}" href="#/channelList" ng-click="setLink(i)">{{getChannelName(i)}}</a>
        </span>
        <div class="infobox-content" style="font-size: 12px">
            <i class="fa fa-list-ol bigger-90 blue"></i> {{i.version}}
            <span style="font-weight: bold;">
                <i class="fa fa-clock-o bigger-130 blue"></i> {{i.binDataUpdateUserName}}
            </span> &nbsp;on {{i.binDataUpdatedOn}}
        </div>
    </div>
</div>
    </div>

Answer 1

从服务加载数据后，可以在then函数中尝试$scope.$apply()。

$scope.items = angular.fromJson(res.data);
$scope.$apply();