Javascript 在ngDialog中提交表单后，角度视图在范围更改时不更新

我是Angular的新手，我正在尝试为学习目的构建一个健壮的todo应用程序。可能有一些基本的问题我做错了，但我想不出来。我认为这与我配置控制器和模板的方式有关。我尝试过类似问题中的一些建议，但没有一个能解决我的问题。我尝试过使用

$scope.$apply（）

，但出现了“apply/digest ready in progress”错误

我使用的是ngRoute，因此当有人进入

/profile

时，它会调用

profileController

并加载

模板/profile.html

。除了设置当前用户并连接到

$rootScope

之外，此控制器实际上不做任何事情。在纵断面图中，我有一个嵌套的控制器，名为

listController

。我将

List

资源传递到

listController

以发出http请求。就路由和get/post请求而言，一切都正常工作

以下是我的控制器的简化示例：

var myApp = angular.module('todo', ['ngRoute', 'ngResource'])
    // config stuff...
    .controller('listController', ['$scope', 'List', 'ngDialog', function ($scope, List, ngDialog) { 
        // This correctly returns all lists for the current user
        $scope.lists = List.query();

        // Open modal form function
        $scope.openModal = function () {
            ngDialog.open({
                template: 'templates/partials/new-list.html',
                className: 'ngdialog-theme-default'
            });
        };

        $scope.createList = function () {
            List.save({}, {
                name: $scope.list.name,
                description: $scope.list.description
            }).$promise.then(function(result) {
                $scope.lists.push(result);
            });
        };
    }]);

下面是

templates/profile.html

的相关部分，它正确地显示了从

List.query（）检索到的所有列表。

：

表单发布正确，我可以在数据库中看到新列表，但视图不会实时更新。当我在promise中

console.log（$scope）

时，我的新列表似乎已添加到该范围中

---

我觉得将控制器连接到多个元素/模板不是最佳做法，但我不确定如何构造它。

好的，经过一点研究，我想我有一个解决方案给你。因此，发生的情况是，您没有正确解析对话框的关闭

以下是我使用的链接供参考：

范围

这里要处理的是范围问题。当对话框打开时，它将使用自己的控制器生成一个单独的模块。此控制器的作用域是单向绑定，在解析时父作用域不会看到它。这就是为什么您的范围没有在父范围级别更新的原因

关于如何做，请参见下一节关于承诺的内容

承诺

要在父级管理作用域，您需要一个名为promise函数的函数，或者更简单地说，一个在对话框关闭后完全解析的函数。在处理promise函数时，会有一种初始回调，允许您将数据传递给promise，而在初始化promise时，您将能够访问该数据，然后该数据将与父级范围变量配合使用

对于这个解决方案，我为您提供了一些可能对您有帮助的更新代码

更新代码

如果我了解您的代码是如何工作的，以及模块是如何工作的，那么更新后的函数应该如下所示。我想试一试：

var myApp = angular.module('todo', ['ngRoute', 'ngResource'])
// config stuff...
.controller('listController', ['$scope', 'List', 'ngDialog', function     ($scope, List, ngDialog) { 
    // This correctly returns all lists for the current user
    $scope.lists = List.query();

    // Open modal form function
    $scope.openModal = function () {
        var dialog = ngDialog.open({
            template: 'templates/partials/new-list.html',
            className: 'ngdialog-theme-default',
            controller : function($scope){  
                $scope.createList = function(){
                    dialog.close($scope.list); // where data is the list data
                };
            }
        });
        dialog.closePromise.then(function(data){
            // at this point data is your list and then you can update the value as you see with like normal
            List.save({}, {
               name: $scope.list.name,
                description: $scope.list.description
            }).$promise.then(function(result) {
               $scope.lists.push(result);
            });
        });
    };
}]);

同样，这只是一个粗略的模板，用于说明您需要做什么，但这是您将如何实现它的

---

我希望这有帮助，如果你还有任何问题，请询问

我认为您正在处理一个$scope问题。这些值是存在的，但您没有引用您认为自己是什么。通过controllerAs引用“列表”，就像这样

<li ng-repeat="list in MyController.lists"> 

应该能解决你的问题

希望有帮助

这将比我能解释得更好。

---

您的

todo侧边栏

和

对话框内容

实际上启动了两个控制器实例，它们的

$scope

是分开的。请参阅我下面的答案，因为我已经查阅了文档以获得一些帮助。这非常有效，谢谢！在

对话框中.closePromise

我必须以

data.value.name

和

data.value.description

的形式访问表单数据。我仍然习惯于在Angular中管理范围，而且我还没有考虑深入研究ngDialog，以找到为我的新模式定义范围/控制器的方法。

var myApp = angular.module('todo', ['ngRoute', 'ngResource'])
// config stuff...
.controller('listController', ['$scope', 'List', 'ngDialog', function     ($scope, List, ngDialog) { 
    // This correctly returns all lists for the current user
    $scope.lists = List.query();

    // Open modal form function
    $scope.openModal = function () {
        var dialog = ngDialog.open({
            template: 'templates/partials/new-list.html',
            className: 'ngdialog-theme-default',
            controller : function($scope){  
                $scope.createList = function(){
                    dialog.close($scope.list); // where data is the list data
                };
            }
        });
        dialog.closePromise.then(function(data){
            // at this point data is your list and then you can update the value as you see with like normal
            List.save({}, {
               name: $scope.list.name,
                description: $scope.list.description
            }).$promise.then(function(result) {
               $scope.lists.push(result);
            });
        });
    };
}]);

<li ng-repeat="list in MyController.lists">