對話框顯示后，是否可以填充mdDialog字段？

Question

我有一個用於編輯表單條目的簡單mdDialog，當您雙擊網格行時會彈出該對話框。 該對話框出現，並且一切正常，除了我想用網格行的內容填充對話框中的字段。 問題是我不確定在哪里實際執行此操作，並且到目前為止，我嘗試過的每個位置都可以在實際顯示Dialog之前訪問，因此對話框中的HTML元素尚不存在。 這是調用對話框的方法：

$scope.showUpdateDialog = function(data) {
    $mdDialog.show({
        controller: UpdateDialogController,
        scope: $scope.$new(),
        templateUrl: 'js/admin/UpdateUsersDialog.html',
        parent: angular.element(document.body),
        clickOutsideToClose:true,
        fullscreen:true
    })
    .then(function(answer) {
        $scope.status = 'Updated User';
    }, function() {
        $scope.status = 'Update User Failed';
    });
};

這是它的控制器：

function UpdateDialogController($scope, $mdDialog) {
    $scope.hide = function() {
        $mdDialog.hide();
    };

    $scope.cancel = function() {
        $mdDialog.cancel();
    };

    $scope.answer = function(answer) {
        $mdDialog.hide(answer);
    };

    $scope.add = function(dialogdata) {
      // For clarity I removed the contents of what happens with the add, as this part works fine.
    };
}   

在templateUrl中：“ js / admin / UpdateUsersDialog.html”是幾個元素，看起來像這樣：

        <input type="text" class="form-control" id="updatelogin"
            placeholder="Enter Name" data-ng-model="dialogdata.login" disabled />

我以為data-ng-model位會處理它（在對話框啟動之前，dialogdata.login等都已分配了變量），但事實並非如此，所以我試圖通過執行類似這樣的操作來強制它：

    var ulogin = document.getElementById('updatelogin');
    ulogin.setInnerHTML(content.login);

...但是由於元素尚不存在，因此'ulogin'var繼續返回為null。 有沒有辦法做到這一點？

Answer 1

好吧，經過一番包bag，我想出了一些辦法，也許這可以幫助遇到類似問題的其他人。 對我來說，解決方案是將所有內容放入onRowDoubleClicked方法中，當我雙擊網格中的一行時，該方法會在ag-grid中調用：

function onRowDoubleClicked() {
    var selectedRowNode = $scope.UserTableGrid.api.getSelectedNodes()[0];
    var data = selectedRowNode.data;
    $scope.login = data.login;
    $scope.name = data.name;
    $scope.email = data.email;
    $scope.type = data.roles;
    $scope.userId = $scope.getUserId($scope.login);
    showUDialog(data);
        function showUDialog(data) {
            $scope.email = data.email;
            $mdDialog.show({
                controller: UpdateDialogController,
                scope: $scope.$new(),
                templateUrl: 'js/admin/UpdateUsersDialog.html',
                parent: angular.element(document.body),
                clickOutsideToClose:true,
                fullscreen:true
            })
            .then(function(answer) {
                $scope.status = 'Updated User';
            }, function() {
                $scope.status = 'Update User Failed';
            });         
        }

        function UpdateDialogController($scope, $mdDialog) {
            $scope.hide = function() {
                $mdDialog.hide();
            };
            $scope.cancel = function() {
                $mdDialog.cancel();
            };
            $scope.answer = function(answer) {
                $mdDialog.hide(answer);
            };
            $scope.add = function() {

                //Close the Dialog
                $scope.answer("Completed");
                var userJson = {
                        "name" : $scope.name,
                        "login" : $scope.login,
                        "password" : "",
                        "roles" : $scope.type,
                        "email" : $scope.email,
                        "tpbUserId" : $scope.userId
                };
                var url = 'RobotDataInterface/User/updateUser';
                var data = JSON.stringify(userJson);
                $http.post(url, data).then(
                        function success(response) {
                            $scope.addUserCallback(response);
                        }, 
                        function failure(response) {
                            $scope.generalRestFailureCallback(response);
                        }
                );
            };
            $scope.addUserCallback = function(data) {
                console.log("User Updated!");
                $scope.loadTableData();
            }
        }   
}

這解決了范圍問題，並通過將它們綁定到相同的值來填充templateUrl中的字段：

        <input type="text" class="form-control" id="name"
            placeholder="Enter Name" data-ng-model="name" />