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

时间:2016-05-18 12:00:32

标签: angularjs angularjs-directive angularjs-ng-options

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

在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'
    };

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

1 个答案:

答案 0 :(得分:6)

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

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

来自文档:

  

请注意,使用ngIf删除元素时,其范围将被销毁,并且在还原元素时会创建新范围。在ngIf中创建的作用域使用原型继承从其父作用域继承。这一点的一个重要含义是,如果在ngIf中使用ngModel绑定到父作用域中定义的javascript原语。在这种情况下,对子作用域内的变量所做的任何修改都将覆盖(隐藏)父作用域中的值。