重新加载包含在AngularJS中的状态变化

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视图之外，当我更改页面时，它仍然具有上一个搜索查询的值，因为它仍处于之前的状态......我如何刷新它以便更新？

注：创建另一个UI视图是不溶液作为这种形式仅仅是一个简单的包括在所有网页上的报头所示，并且不涉及任何状态等

更新：所以你可以看到我的形式和控制器做：

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', ''); 

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

Answer 1

这是我的时刻：

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

它然后触发模式复位（从我可以告诉），因为它不再提交先前的结果...思考？它感觉肮脏，但它的工作原理！

Answer 2

由于表单是可用的全局，我的建议是，你把$ rootScope查询。 Rootcope在整个应用程序中都可用（当然，如果你注入的话），所以你可以在任何时候重置数值。

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

Answer 3

重新载入路线，你可以使用：

$route.reload(); 

，但我不知道这将刷新包含的文件。

也许您可以将包含文件的字符串设置为$ scope变量，然后将其设置为空字符串，然后再将其放回去？不知道它是否会起作用，可能需要$超时，$ digest或$ watch来确保它已准备好翻转。

另一种选择是一个

ng-if="someForm" 

VAR设置为第一路径，当你完成后，将其设置为false，并有另一个

ng-if="someOtherForm" 

第二包含。或使用相同的，但首先将其设置为虚假。

但是，如果是关于清洁表格，还有其他方法可以做到这一点。就像将所有model-vars设置为空字符串或null。所以如果你在$ scope.searchEntry中有它，你可以将它设置为undefined或“”。 在您的例子：

$scope.query = "";