将模板加载为弹出对话框后未加载angularjs范围

Question

单击按钮时，我想打开一个模式对话框窗口并将模板 (.html) 页面加载到弹出窗口中。在我的模板中，我有一个下拉列表，需要与数据库中的数据绑定（在我的情况下，从 Angularjs Factory 服务 WCF 服务调用接收数据）

对话框窗口打开后下拉菜单未加载。

在下面找到我的代码：我第一个打开弹出对话框的控制器：

app.controller('MyFirstController', function ($scope, $compile) {

    $scope.showTrackingPopup = function () {
        var Id = 111;        
        var popupTpl = document.createElement("div");
        popupTpl.setAttribute("id", "TestDialog");
        popupTpl.setAttribute("ng-app", "MyApp");
        popupTpl.setAttribute("ng-include", "'app/templates/Test-template.html'");
        popupTpl.setAttribute("ng-controller", "MySecondController");
        popupTpl.setAttribute("ng-init", "InitData(Id)");
        var popupScope = $scope.$new();
        popupScope.someValue = Math.random();
        var popupLinker = $compile(popupTpl);
        var popupElement = popupLinker(popupScope);

        var dialog = $('<div/>').html(popupElement);

        dialog.dialog({
            modal: true,
            width: 'auto',
            height: 'auto',
            draggable: true,
            resizable: false,
            position: { my: "left", at: "center", of: window },
            close: function (event, ui) {
                $('body').find('#TestDialog ').remove();
                popupScope.$destroy();
            }
        });      
        return false;
      }
}); 

我的第二个控制器，它从数据库中获取数据并加载到 ng-repeat 范围内并绑定下拉控件：

app.controller(' MySecondController ', function ($scope, $compile, $http, $rootScope,    FactService) {
    $scope.DropDownData = [];

    $scope.InitData = function (Id) {
        $scope.DropDownData = FactService.GetDropdownData(Id);        
    }
});

如何等待第二个控制器直到数据从工厂服务返回，然后自动加载下拉菜单？请帮助解决这个问题！

Answer 1

如果不知道FactService.GetDropdownData 返回什么，我无法确定，但在正常情况下，它应该是一个 $http 承诺。在这种情况下，您必须在履行此承诺时加载下拉数据。

例如：

FactService.GetDropdownData(Id).
.success(function(data){
    // your $http promise was fullfiled successfuly and you have your data
    $scope.DropDownData = data;
}
.error(function(err){ /* handler your error here */});

另外，我不太确定 Id 值是否以您的方式在 ng-init 中正确传递。在控制器中操作 DOM 也被认为是一种不好的做法，请考虑创建一个指令。如果您想要更轻松的开箱即用弹出窗口，您可能需要考虑Angular-ui bootstrap 模块