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

我正在尝试使用模态窗口（请参阅http://angular-ui.github.io/bootstrap/）。模态窗口中的范围（AngularJS指令）

在父控制器I具有以下功能：

$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

来源

2013-10-04 Tenzi

你可以说明，在小提琴？ –

我已经添加了一个来自Plunker的链接，我无法编辑小提琴的html标签（我必须指定ng-app）。 – Tenzi

在你的决心对象模态控制器，你实际上是通过母公司的范围待办事项对象返回作为参考，所以当你在模式的控制器$scope.todos = todos;它分配它实际上指向父级的todos范围变量。您可以返回父母的待办事项的副本，而不是对该变量的引用。

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

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

来源

2013-10-04 14:04:57

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

回答

相关问题