Question

我是Angular的新手，我正在尝试为学习目的构建一个强大的待办事项应用程序。可能有一些基本的我做错了，但无法搞清楚。我认为这与我配置控制器和模板的方式有关。我尝试过在类似问题中找到的一些建议，但没有一个可以解决我的问题。我已尝试使用$scope.$apply()，但我收到“正在进行应用/摘要”错误。

我正在使用ngRoute，所以当有人前往/profile时，它会调用profileController并加载templates/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()检索到的所有列表：

<div class="todo-sidebar" ng-controller="listController">
    <h3>Your lists <a href="#" ng-click="openModal()"><span>New list</span></a></h3>
        <ul>
            <li ng-repeat="list in lists">
                <a href="#"><span class="list-name">{{list.name}}</span></a>
        </li>
    </ul>
</div>

问题是当我从createList部分内部调用templates/partials/new-list.html函数时：

<div class="dialog-contents" ng-controller="listController">
    <h3>New list</h3>
    <form ng-submit="createList()">
        <div class="form-group">
            <label>Name</label>
            <input type="text" name="name" ng-model="list.name">
            <textarea name="description" ng-model="list.description" rows="10"></textarea>
            <button type="submit" class="button">Create list</button>
        </div>
    </form>
</div>

表单正确发布，我可以在我的数据库中看到新列表，但视图不会实时更新。当我在承诺中console.log($scope)时，我的新列表已被添加到范围中。

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

Answer 1

好的，经过一番研究后，我觉得我有一个解决方案。所以发生的事情是你没有正确解决对话框的关闭。

此处参考的是我使用的链接：

https://github.com/likeastore/ngDialog#api

<强>范围

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

关于方法，请参阅有关承诺的下一部分。

<强>承诺

要在父级别管理范围，您需要一个称为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);
            });
        });
    };
}]);

对于您需要做的事情，这只是一个粗略的模板，但这就是您实现它的方式。

我希望这有帮助，请问您是否还有其他问题。

Answer 2

我认为你正在处理$ scope问题。价值观存在，但您没有参考您的想法。引用＆＃34;列表＆＃34;通过控制器，就像这样......

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

应该解决你的问题。

希望有所帮助。

这将解释它比我能做得更好。 https://github.com/angular/angular.js/wiki/Understanding-Scopes#ngRepeat

在ngDialog

2 个答案: