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 
});