模態窗口中的範圍（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指令）

回答

相關問題