Question

我正在尝试使用模态窗口（请参阅http://angular-ui.github.io/bootstrap/）。

在父控制器中，我有以下功能：

    $scope.open = function () {

        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',            
            controller: ModalInstanceCtrl,
            resolve: {
            year: function () {
                return $scope.year.value;
            },
            month: function () {
                return $scope.month;
            },
            day: function () {
                return $scope.day.name;
            },
            todos: function () {
                return $scope.day.toDoItems;
            }
        },
        backdrop: 'static'
    });

    modalInstance.result.then(function (todos) {
        angular.forEach(todos, function (todo) {
            if (todo.New)
                $scope.day.toDoItems.push(todo);
        });            
    }, function () {
        $log.info('Modal dismissed at: ' + new Date());
    });
};

在模态控制器中有一个addTodo函数：

var ModalInstanceCtrl = function ($scope, $modalInstance, year, month, day, todos) {
...
    $scope.todos = todos; 
    $scope.addTodo = function () {
        $scope.todos.push({ TodoText: $scope.todoText.value, Done: false, Del: false, Date: new Date(year, month, day), Priority: 1, New: true});
        $scope.todoText.value = "";
    };
...
$scope.ok = function () {
    $modalInstance.close($scope.todos);
    };
};

在父视图中，每天都会显示一个todos的日历。单击日期标题时，模态窗口处于打开状态，您可以添加待办事项。我的问题是，在模态窗口中添加待办事项时，todos也会同时添加到父视图中。现在todos在父视图中添加了两次：一次在模态视图中添加它们，然后在模态视图上单击“确定”。但是我希望只有在模态视图上单击“确定”时才将todos项添加到父视图中。

有人为此解决问题吗？提前谢谢！

你可以在Plunker中看到它的工作原理：http://plnkr.co/edit/Nr1h7K3WZyWlRlrwzhM3?p=info

Answer 1

在模态控制器的解析对象中，您实际上将父对象的范围todos对象作为参考传递回来，因此当您在模态的控制器$scope.todos = todos;中指定它时，它实际指向父对象todos范围变量。您可以返回父级todos的副本，而不是对变量的引用。

todos: function () {
    return angular.copy($scope.day.toDoItems);
}

http://plnkr.co/edit/Ty10C8JOKHlwb2bWA89r?p=info

模态窗口中的范围（AngularJS指令）

1 个答案: