Question

我希望在我的应用中状态发生变化时自行刷新包含。

示例：

<div ng-include="'partials/search-form.html'"></div>

全球聆听者：

phonecatApp.run(function ($state,$rootScope, $log) {

    $rootScope.$state = $state;

    $rootScope.$on('$stateChangeSuccess', function(){
        if( !$state.includes('search') ) {
            // refresh the search-form include in the header
        }
    });
});

我该怎么做？因为表单位于ui-view之外，当我更改页面时，它仍然具有上一个搜索查询的值，因为它仍然处于以前的状态...如何刷新它以便它＃39 ; s更新???

注意：创建另一个ui-view不是解决方案，因为此表单只是一个简单的包含，显示在所有页面的标题中，并且与任何状态等无关。

更新：所以你可以看到我在使用表单和控制器做什么：

phonecatControllers.controller('SearchCtrl', function($rootScope, $scope, $state, $location) {

    $scope.query = ($state.includes('search') ? $location.search()['q'] : '');
    $scope.filterQuery = ($state.includes('search') ? $location.search()['q'] : '');

    if(!$scope.query){
        $location.search('q', null);
    }
    $scope.queryChanged = function () {
        if($scope.query){
            $state.go('search', {'q': $scope.query} );
        } else {
            $location.search('q', null);
        }
        $scope.filterQuery = $scope.query;
    }
});

<form class="form-search" ng-controller="SearchCtrl" ng-submit="queryChanged()">
    <input name="q" ng-model="query" id="filter" type="text">
    <button type="submit" class="btn">Search</button>
</form>

更新：我能想到的最好的想法是清空输入字段，如下所示：

var q = document.getElementsByName('q');
q.setAttribute('value', '');

当状态更改不是搜索状态时。这会自动触发输入上的更改事件，然后使其删除它的脏类等

Answer 1

由于表单在全球范围内可用，我建议您将查询放在 $ rootScope 中。 rootcope可以在整个应用程序中使用（当然，如果你注入它），那么你可以随时重置值。

更好的解决方案是将查询值存储在rootscope并使用服务访问它。

Answer 2

要重新加载路线，您可以使用：

$route.reload();

但我不确定是否会重新加载包含的文件。

也许您可以将包含文件的字符串设置为$ scope变量，然后先将其设置为空字符串，然后再将其重新放回？不确定它是否可行，可能需要$ timeout，$ digest或$ watch以确保它已准备好翻转。

另一种选择是设置

ng-if="someForm"

var到第一个路线，当你完成后，将它设置为假并有另一个

ng-if="someOtherForm"

第二个包括。或者使用相同的东西，但首先将其设置为虚假的东西。

但如果是关于清理表单，还有其他方法可以做到这一点。就像将所有模型变量设置为空字符串或null一样。因此，如果您在$ scope.searchEntry中有它，则将其设置为undefined或＆＃34;＆＃34;。在您的示例中：

$scope.query = "";

Answer 3

这就是我现在所拥有的：

phonecatApp.run(function ($state, $rootScope, $log, $location) {

    $rootScope.$state = $state;

    $rootScope.$on('$stateChangeSuccess', function(){
        if( !$state.includes('search') ) {
            $('[name=q]').val('');
        } else {
            $('[name=q]').val($location.search()['q']);
        }
    });

});

我不得不使用jQuery，因为Vanialla JS无法看到该元素。但它基本上只是根据你在应用程序中的位置来设置输入值。

唯一的问题是，如果您在表单空白时提交表单，那么它将默认返回之前的状态！ 大概是因为该模型尚未重置！

所以，如果我这样做：

$('[name=q]').val('').change();

它然后触发模型重置（从我可以告诉的），因为它不再提交先前的结果...思考？它感觉很脏，但它有效！

重新加载包括AngularJS的状态变化

3 个答案: