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);        
    }
});

如何等待第二个控制器直到数据从Factory服务返回，然后下拉自动加载？请帮忙！

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模块

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

1 个答案: