angularjs在模态窗口中作用域

Question

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

当您点击“打开”时，它会启动一个模态窗口。单击“xx”，它会显示在select2选择框中选择的元素的id。在select2中更改所选元素。它将在屏幕上更新，但是当您单击“xx”时，显示新ID似乎并不令人耳目一新。这看起来像是一个范围问题 - 但我不确定我还需要做什么。

Answer 1

您需要将ng模型更改为对象。

 $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正在创建自己的范围，因此当您选择一个项目时，它只会影响select2中的$scope.chosenItem。

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

在app.js中：

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

在index.html中：

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

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