AngularJs - 从控制器更改/按选择颜色以$父NG-模型

Question

这里是一个非常简单的例子： JsFiddle

这里是MainCtrl

function MainCtrl($scope) 
    { 
    $scope.color = {}; 
    $scope.colors = [ 
     { name: "red" }, 
     { name: "yellow" }, 
    ]; 

var newColor = $scope.color; 
    newColor.name = "blue"; 
$scope.colors.push(newColor); 
$scope.selectedColor = newColor; 

}

我有3个html格式：

1. Mai nForm.Html
2. AvailableColors.html（部分，上MainForm.html包埋与NG-包括）
3. AddNewColor.html

MainForm.Html看起来像这样：

<div ng-app ng-controller="MainCtrl"> 
<div ng-include="'AvailableColors.html'"> 
</div> 

AvailableColors.html看起来像这样：

<select ng-model="$parent.selectedColor" ng-options="color.name for color in colors"> 
    <option value="" selected>Select Color ..</option> 
</select> 
<a href="#">Add New Color</a> 
<br /> 
value is {{ selectedColor }} 

在JsFiddle示例中，我试图模拟用户添加新颜色。我需要AvailableColors的ng模型有'$ parent'。因为它来自ng-include，并且不包含'$ parent'，所以选择的选项将不在表单提交的范围内。

我的问题是，当用户添加它们时，我无法将新添加的颜色推送到AvailableColors.html。

有什么建议吗？

一注：我知道在JsFiddle中增加了新的颜色'blue'，但那是因为在那个例子中确实没有ng-include。

很明显，当实际上有一个ng-include时，它不会出现，不足以刷新页面。

Answer 1

父母只能从儿童读取。要做你想做的事，你将不得不使用类似父控制器中的方法。

$scope.setSelected = function(color) { 
     $scope.selectedColor = color; 
    } 

    $scope.addColor = function(newColor) { 
     $scope.colors.push(newColor); 
    } 

然后，您可以使用输入像那些在你的HTML包括：

//Selector 
<select ng-click="setSelected(selectColor)" ng-model="selectColor" ng-options="color.name for color in colors"> 
    <option value="" selected>Select Color ..</option> 
</select> 

//Add control 
<input type="text" ng-model="newColor.name" /> 
<button id="addBtn" ng-click="addColor(newColor)">Add</button> 

正如你所看到的，我加在选择一个NG-点击更新父。

Answer 2

如果您使用引用对象上的$范围（as recommended by the Angular team），您将不必使用$parent任何地方：

$scope.model = {selectedColor: ''}; // use an object here 
$scope.addColor = function(newColorName) { 
    $scope.colors.push({name: newColorName}); 
}; 

AvailableColors.html：

<select ng-model="model.selectedColor" ng-options="color.name for color in colors"> 
    <option value="" selected>Select Color ..</option> 
</select> 
<br> 
<input type="text" ng-model="colorName"> 
<button ng-click="addColor(colorName); colorName=''">Add</button> 
<br /> 
value is {{ model.selectedColor }} 

Plunker，它采用NG -包括。