angularjs - 模态窗口中的angularjs范围

Question

我在http://plnkr.co/edit/AQl49R?p=preview创建了一个 plunker，它演示了我遇到的一个问题。

当您单击“打开”时，它会启动一个模式窗口。单击“xx”，它会显示在 select2 选择框中选择的元素的 id。更改 select2 中的选定元素。它将在屏幕上更新，但是当您单击“xx”时，它似乎并没有刷新以显示新的 id。对我来说，这似乎是一个范围界定问题——但我不确定我还需要做什么。

Answer 1

您需要将 ng-model 更改为对象。

 $scope.items = {};
 // or $scope.items = [];
 $scope.items.chosenItem = { id: 3, text: "bamboo" };

在 HTML 中：

<input type="hidden" ui-select2="select2ConfigCustomer" style="width: 200px" placeholder="All" ng-model="items.chosenItem">

这是一个更新的 Plunker。

http://plnkr.co/edit/T8D1Tw?p=preview

Answer 2

Select2 正在创建自己的范围，因此当您选择一个项目时，它只会影响 $scope.chosenItemselect2 中的。

您需要做的是创建一个哈希/对象来保存chosenItem：

在 app.js 中：

$scope.foo = {};
$scope.foo.chosenItem = { id: 3, text: "bamboo" };

在 index.html 中：

<input type="hidden" ui-select2="select2ConfigCustomer" ng-model="foo.chosenItem">

子范围不能直接更改父范围变量，但它们可以更改哈希/对象内的值。