如何從視圖中獲取信息到控制器並返回到另一個視圖？

在我的項目中，用戶可以從外部API搜索flashcard集的類別。返回信息時，每個組的名稱使用ng-repeat顯示。我還爲ng-repeat附加了一個ng-click函數，該函數複製集合id，然後發送另一個$ http get請求，返回有關該特定集合的信息。如何從視圖中獲取信息到控制器並返回到另一個視圖？

下面是HTML：

<form ng-submit='getCategories(searchTerm)'> 
    <input ng-model='searchTerm' placeholder="Search Categories"> 
</form> 
<ul> 
    <li ng-repeat='name in categories' ng-click='getCategory(name.id)' ui-sref='category'>{{name.category}}</li> 
</ul>

我的問題是，當用戶點擊通過UI-SREF一個設置視圖的變化，功能激發的$ HTTP請求，我可以控制檯日誌的信息，但它不會顯示在新視圖上。我知道每當狀態發生變化時，控制器都會'刷新'，但我不知道如何解決這個問題。

這裏是控制器：

這裏是服務：

angular.module('FlashCards').service('flashcard', function($http, $q){ 


    this.getCategoriesBySearch = function(searchTerm){ 
    var deferred = $q.defer(); 
    $http({ 
     method: "GET", 
     url: "https://www.coursehero.com/api/flashcards/categories/?api_key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&starts_with=" + searchTerm 
    }).then(function(response){ 
     deferred.resolve(response.data.data); 
    }) 
    return deferred.promise; 
    }; 

    this.getCategoryById = function(setId){ 
    var deferred = $q.defer(); 
    $http({ 
     method: "GET", 
     url: "https://www.coursehero.com/api/flashcards/categories/" + setId + "/sets/?api_key=YMBXVufy7GkBKoVE34SAMAZJfPVapK32" 
    }).then(function(response){ 
     deferred.resolve(response.data.data); 
    }) 
    return deferred.promise; 
    }; 



});

讓我知道，如果這個問題的任何部分需要多一點解釋。謝謝。

來源

2016-06-24 FlashBanistan

在StateProvider配置文件中使用'resolve'屬性使用定義的狀態上的resolve屬性將數據提供給控制器上的狀態變化 –

。看看[這個（https://github.com/angular-ui/ui-router/wiki）]（https：// github。com/angular-ui/ui-router/wiki）鏈接尋求幫助。 – Unknown

你可以附上一個plunkr嗎？ – Deepanjan

您在同一元素上同時使用ng-click和ui-sref。兩者都在點擊後激活，並且它們之間沒有任何隱式通信。這意味着ng-click中的功能結果不會自動發送到ui-sref。

有多種方法可以解決這個問題。最好的方法是使用resolve。爲此，您需要在已定義category狀態的位置進行更改。這個配置應該是這個樣子：

$stateProvider.state('category', { 
    url: '/:categoryId/category', 
    resolve: { 
     category: ['flashcard', '$stateParams', function (flashcard, $stateParams) { 
      return flashcard.getCategoryById($stateParams.categoryId); 
     }] 
    } 
    /* Everything else you already have goes here... */ 
});

在此之後，您需要更改您的模板傳遞id作爲參數傳遞給這種狀態。請注意，提取新數據的工作將被解決，並且不再需要ng-click。這可以是這樣的：

<li ng-repeat='name in categories' ui-sref='category({categoryId: name.id})'>{{name.category}}</li>

然後，終於，在控制器的狀態下，你正在展示這個數據，你可以注入category像你的服務做的（category就是我們在配置解析），它應該爲你提供正確的數據。

如果您不想執行該解決方案，則可以從模板中刪除ui-sref，而是在之後導航到從控制器查看您已獲取http數據。將導航代碼放置在then區塊中。

一些理論：resolve的用例是，當您嘗試導航到某個狀態並在該狀態加載之前想要完成某些操作。您解決的所有問題都將在控制器中注入您正在解決的狀態。用它來做http，前端緩存和什麼不是。如果解決失敗，則不會加載狀態。更多信息在official docs

來源

2016-06-24 06:44:27

如何從視圖中獲取信息到控制器並返回到另一個視圖？

回答

相關問題