1

这是一个非常简单的例子： 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. 主窗体.Html
  2. AvailableColors.html（部分，使用 ng-include 嵌入 MainForm.html）
  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-model 来拥有“$parent”。由于它来自 ng-include，并且没有“$parent”，因此选择的选择将不在表单提交的范围内。

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

有任何想法吗？

注意：我知道在 JsFiddle 中添加了新颜色“蓝色”，但那是因为该示例中确实没有 ng-include。

显然，当实际存在 ng-include 时，它​​不会出现，只是刷新页面。

4

2 回答 2

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-click 以更新父级。

于 2013-03-20T01:06:34.857 回答
0

如果您在 $scope 上使用对对象的引用（如 Angular 团队所建议的那样），则不必在$parent任何地方使用：

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

可用颜色.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-include。

于 2013-03-21T16:21:02.480 回答