爲什麼我的$ scope變量只在HTML中更新，而在使用Bootstrap和AngularJS時不在控制器中？

Question

我正在使用Angular的UI Bootstrap來顯示一個模式覆蓋圖，用戶可以在選擇框中選擇一個項目。用戶選擇的值應該在覆蓋層的控制器中可用來發送回開放控制器。在HTML的模式，這個工程：

<select 
    ng-model="selectedItem" 
    ng-options="item for item in items"> 
</select> 
Selected: <b>{{ selectedItem }}</b> 

但在控制器，這始終是不確定的：

$scope.selectedItem; 

我爲什麼不能在我的控制器訪問該值？

我正在處理的項目有更多的移動部件（我使用typeahead和buttons指令而不是簡單的選擇），但我將這個問題簡化爲這個工作示例：http://plnkr.co/edit/lb0NAGLR8eEVrywA67EC?p=preview。在這個例子中，當模態關閉時，模態中的選擇應該顯示在父頁面上。

Answer 1

除了在控制器中創建的模型外，它似乎爲模態內的HTML創建子範圍。當您打開模式時，請參閱this plunker中的ID。

所以要點是你要在子範圍上設置'selectedItem'，這在你的模態實例控制器中沒有訪問的範圍中。有兩種方法來解決這個問題：

選項1 帶參數在 'OK' 功能，通過它，結果在你的HTML (plunker)：

<button class="btn btn-primary" ng-click="ok(selectedItem)">OK</button> 

JS：

$scope.ok = function (arg) { 
    $modalInstance.close(arg); 
}; 

選項2 在控制器中創建一個對象，該對象將繼承到用於設置屬性的子範圍。這就是sample code所做的。

當selectedItem由角度設置時，它被設置在子範圍上，控制器不知道任何內容，並且它不會傳播到父範圍。如果設置繼承的對象的值將更改繼承的對象的屬性，你可以在你的控制器(plunker)訪問：

<select 
    ng-model="selected.Item" 
    ng-options="item for item in items"> 
</select> 

JS：

$scope.ok = function() { 
    $modalInstance.close($scope.selected.Item); 
}; 

Answer 2

變化

$modalInstance.close($scope.selectedItem); 

到

$modalInstance.close($scope.selected.item); 

而在HTML

<div class="modal-body"> 
     <select 
      ng-model="selected.item" 
      ng-options="item for item in items"> 
     </select> 
     Selected: <b>{{ selected.item }}</b> 
    </div> 

更新plnkr - http://plnkr.co/edit/TuwPqtNeQwBVeXU2ncIe?p=preview

Answer 3

當您使用AngularUI引導，模態對話框中新c hild作用域被創建。

這意味着ModalInstanceCtrl中的$scope實際上是HTML範圍的父範圍。 （不要問我爲什麼他們建造這樣的看法。）

爲了證明這一點，改變

ng-model="selectedItem"到ng-model="$parent.selectedItem"

，改變

Selected: <b>{{ selectedItem }}</b>到Selected: <b>{{ $parent.selectedItem }}</b>。

瞧！有用。

一個更好的解決方法就是改變ok()方法接受孩子範圍的selectedItem如下：

ng-click="ok(selectedItem)" 

// Then, in the controller 
$scope.ok = function (selectedItem) { 
    $modalInstance.close(selectedItem); 
}; 

對於發生的事情更完整的解釋，閱讀this article。