ng-model 未在 ng-if 中更新

Question

我无法在我的选择 html 块中检索我选择的选项 (ng-model=filter) 的实际值。

请注意，如果我没有设置 $scope.filter，那么即使我在下拉列表中选择了一个选项，$scope.filter 也会保持未定义。

我的 html 模板，filters.html：

<div ng-if="!showFilterTemplatePlz"> <button class="btn btn-primary" ng-click="showFilterTemplate()" type="button">Add Filter</button> </div> <div ng-if="showFilterTemplatePlz" class="inline"> <button class="btn btn-primary" ng-click="closeFilters()" type="button">Close filters</button> <label>filters</label> <select ng-model="filter" ng-options="filter.name for filter in filterOptions" class="form-control"> </select> <p>{{filter.name}}</p> <button ng-click="addFilter()" id="addFilterButton" class="btn btn-primary btn-sm btn-default" type="button"><i class="fa fa-plus"></i> Add</button> </div>

在我的指令中：

      .directive('filters', ['retrieveStaticDatasService','usersService', function(datasService, usersService) {
        return {
            restrict: 'E',
            scope: false,
            controller: function ($scope) {
                /* init */
                $scope.filterOptions = [
                    {name: "languages"},
                    {name: "nationality"},
                    {name: "location"}
                ];
                $scope.filter = $scope.filterOptions[0];
                /* end init */
                $scope.showFilterTemplate = function(){
                      $scope.showFilterTemplatePlz=true;
                }
                $scope.closeFilters = function(){
                    $scope.showFilterTemplatePlz=false;
                }
                $scope.addFilter = function(){
                    console.log("filter to add : " + $scope.filter.name);                        
                }
            },
            templateUrl: '/partials/components/filters.html'
        }
    }])

结果：

我可以看到实际值出现在我的 html 中，但无论我选择什么选项，我都会在控制台中显示 $scope.filter.name 的“语言”！我截图给你看：http://hpics.li/4a37ae3

感谢您的帮助。

[编辑：我做了一些测试，并且我的模型只有在它们不在“<div ng-if="..."></div>”中时才会被设置和更新]。是不是不能直接在指令里面放一个ng-if？

回答：Angularjs ng-model doesn't work inside ng-if

Answer 1

我找到了解决方案，问题是 ng-if 创建了一个子作用域。所以我在

中将过滤器更改为 $parent.filter

 <select ng-model="$parent.filter" ng-options="option.name for option in filterOptions" class="form-control">
      </select>

Answer 2

我认为您必须使用名为“过滤器”的对象来混淆它。您可能会覆盖 ng-options 对象而不是控制器对象。

试试改成

<select ng-model="filter" ng-options="option.name for option in filterOptions" class="form-control"></select>
<p>{{filter.name}}</p>
<button ng-click="addFilter()" id="addFilterButton" class="btn btn-primary btn-sm btn-default" type="button"><i class="fa fa-plus"></i> Add</button>