重新加載包含在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 = "";