AngularJS在更改路線時清除模型

Question

我有一個過濾器&我的固定標題包含下拉列表（用於過濾器）和輸入字段（用於搜索）的搜索功能。

對於下拉我使用這個Angularjs-dropdown-multiselect

目前，提交申請後，用戶將被引導到結果頁面和下拉菜單和輸入文本模型內容被保留，這就是我多麼希望它成爲。問題是，如果用戶轉到結果頁面以外的頁面，我想重置模型（回到空）。

HTML：

<div class="col-sm-3"> 
    <div class="dropdown" ng-dropdown-multiselect="" options="cats" selected-model="catModel" checkboxes="true" translation-texts="{buttonDefaultText: 'Categories'}"></div> 
</div> 

<div class="col-sm-3"> 
    <div class="dropdown" ng-dropdown-multiselect="" options="ccs" selected-model="ccModel" checkboxes="true" translation-texts="{buttonDefaultText: 'Credit Cards'}"></div> 
</div> 

<div class="col-sm-6"> 
    <form data-ng-submit="findValue(catModel, ccModel, keyword)" > 
     <div class="input-group search-bar"> 
      <input type="search" class="form-control" placeholder="Search for..." data-ng-model="keyword"> 
      <span class="input-group-btn"> 
       <button class="btn btn-search" type="button" data-ng-click="findValue(catModel, ccModel, keyword)"><img src="img/icon_search.png" alt="Search" /></button> 
      </span> 
      <input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/> 
     </div> 
    </form>     
</div> 

JS：

.controller('mainController', ['$scope', '$http', '$location', 'dataFactory', 
function ($scope, $http, $location, dataFactory){ 
    dataFactory.getCategories().success(function (data){ 
     $scope.cats = data; 
    }); 

    dataFactory.getCcs().success(function (data){ 
     $scope.ccs = data; 
    }); 
    $scope.catModel = []; 
    $scope.ccModel = []; 

    $scope.findValue = function(catModel, ccModel, keyword) { 
    var searchUrl = baseUrl; 
    var catID = '';  
    if(catModel.length > 0) { 
     searchUrl += 'categoryID='; 
     angular.forEach(catModel, function(value, key) { 
      if(key < catModel.length - 1) { 
       searchUrl += value.id + ','; 
       catID += value.id + ','; 
      } else { 
       searchUrl += value.id; 
       catID += value.id; 
      } 
     }) 
     if(ccModel.length > 0 | keyword != null) { 
      searchUrl += '&'; 
     }    
    } 

    if(ccModel.length > 0) { 
     searchUrl += 'ccID='; 
     angular.forEach(ccModel, function(value, key) { 
      if(key < ccModel.length - 1) { 
       searchUrl += value.id + ','; 
      } else { 
       searchUrl += value.id; 
      } 
     }) 
     if(keyword != null) { 
      searchUrl += '&'; 
     }     
    } 

    if(keyword != null) { 
     searchUrl += 'search_keyword=' + keyword; 
    } 

    $http.get(searchUrl).success(function (data) { 
     $scope.results = data; 
     $scope.pageTitle = 'Promotions search result'; 
     $location.path('/promotion'); 
    }) 
} 
} 

我把模型和函數內部mainController，因爲頭是每個視圖。

我在AngularJS和編程方面很新，所以這段代碼可能不正確，請讓我知道是否有更簡單和正確的方法。任何幫助表示讚賞。 謝謝

Answer 1

您可以訂閱以下事件$locationChangeSuccess，這些事件將在每個位置更改時觸發。 在裏面你可以重置你的模型。

只是聲明

$rootScope.$on('$locationChangeSuccess', function() { 
    //reset your model here 
});