Question

我正在使用有角度的谷歌地图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>

JS

$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;

    }

为什么这不起作用？

Answer 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

Ng模型不起作用

1 个答案: