Ng-model not working

Question

私は、角度のGoogleマップAPIを使用しています。私はボタンを押すと、searchboxの入力フィールドをクリアしたい。

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