吳模型不工作

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