javascript - 改变路线时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 中，因为 header 位于每个 View 中。

我是 AngularJS 和编程方面的新手，所以这段代码可能不合适，如果有更简单和正确的方法，请告诉我。任何帮助表示赞赏。谢谢

Answer 1

您可以订阅以下事件 $locationChangeSuccess，该事件将在每次位置更改时触发。在里面你可以重置你的模型。

只要声明

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