Ng模型不起作用答案

【问题标题】：Ng-model not workingNg模型不起作用
【发布时间】：2016-05-10 13:13:38
【问题描述】：

我正在使用角度谷歌地图 API。我想在按下按钮时清除搜索框输入字段。

HTML

<ui-gmap-search-box options="searchbox.options" template="searchbox.template" events="searchbox.events" position="searchbox.position" ng-model="searchModel.searchTerm"></ui-gmap-search-box>

<md-button class="md-icon-button searchbutton" ng-click="toggleSearch()" md-ink-ripple="false" aria-label="Custom Icon Button">
        <md-icon md-svg-icon="images/search.svg"></md-icon>
    </md-button>

$scope.toggleSearch = function () {

        var searchFieldInput = document.getElementById('pac-input')
        if (searchFieldInput.classList.contains('searchactive')) {
            searchFieldInput.classList.remove('searchactive')



        } else {
            searchFieldInput.classList.add('searchactive')
        }

        $scope.searchModel.searchTerm = null;

    }

为什么这不起作用？

【问题讨论】：

控制台有错误吗？

标签： html angularjs google-maps angular-ngmodel angular-google-maps

【解决方案1】：

通过ui-gmap-search-box 指令初始化搜索模板会创建一个新的子范围，因此$scope.searchModel.searchTerm 不会被更改。

解决方案

将toggleSearch 函数替换为：

$scope.toggleSearch = function() {
   var searchFieldInput = document.getElementById('pac-input')
   var scope = angular.element(searchFieldInput).scope(); //get scope for ui-gmap-search-box
   scope.searchModel.searchTerm = "";
}

工作示例

Plunker

【讨论】：