选择框的 ng-model 不反映控制器功能的变化

Question

我在使用 angularJs 的 select 框中遇到 ng-model 问题。模型值未在控制器功能中更新。但是，当 select 框放置在主模板中而不是放置在指令模板中时，它确实反映了控制器的变化。

在 main.html

中工作正常

<select ng-model="selectedGuest" id="guests-sel"
    ng-change="doSearchByFilterDropdown($event, selectedGuest.key, 'guests')" 
    ng-options="guest as guest.value for guest in guests track by guest.key">
 </select>

这是main.html

<div ng-init="init()">
    <div class="content-wrapper">

        <div ng-if="selTemplate == 'tourism'">
            <!-- Does not work reflect changes when changedin this directive template -->
            <search-results-tourism></search-results-tourism>
        </div>
        <!--  Select Box ng-model value reflects in controller when placed here, 
           but not in directive template -->
        <select ng-model="selectedGuest" id="guests-sel"  ng-change="doSearchByFilterDropdown($event, selectedGuest.key, 'guests')" 
           ng-options="guest as guest.value for guest in guests track by guest.key">
       </select> 

    </div>
</div>

在指令模板中不起作用。早些时候我使用 ng-include 作为模板，但我认为这是因为创建的新范围 ng-include 所以我用指令替换它但仍然没有任何想法。？

这是指令

<search-results-tourism></search-results-tourism>
 ...
.directive('searchResultsTourism', function () {
    return {
        restrict: 'E',
        scope: false,
        templateUrl : 'views/search-results-tourism.html'
    };

在指令模板中调用相同的 select 框不会让控制器中的 ng-model 值更新

Answer 1

https://docs.angularjs.org/api/ng/directive/ngIf

ng-if 正在为您的指令创建一个新范围。

来自文档：

Note that when an element is removed using ngIf its scope is destroyed and a new scope is created when the element is restored. The scope created within ngIf inherits from its parent scope using prototypal inheritance. An important implication of this is if ngModel is used within ngIf to bind to a javascript primitive defined in the parent scope. In this case any modifications made to the variable within the child scope will override (hide) the value in the parent scope.

选择框的 ng-model 不反映控制器功能的变化

ng-model for selectbox does not reflect changes in controller function

angularjs

angularjs-directive

angularjs-ng-options