如何从视图获取信息到控制器并返回到另一个视图？答案

【问题标题】：How do I get information from the view to the controller and back to another view?如何从视图获取信息到控制器并返回到另一个视图？
【发布时间】：2016-06-24 05:58:18
【问题描述】：

在我的项目中，用户可以从外部 api 搜索抽认卡集的类别。返回信息时，每组的名称会使用 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').controller('categoryCtrl', function($scope, flashcard){

  $scope.getCategory = function(setId){
    flashcard.getCategoryById(setId)
    .then(function(response){
      $scope.category = response;
    })
  }

});

这里是服务：

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;
  };



});

如果问题的任何部分需要更多解释，请告诉我。谢谢。

【问题讨论】：

使用定义的状态上的 resolve 属性在状态变化时向控制器提供数据
在 StateProvider 配置文件中使用 'resolve' 属性。查看this(https://github.com/angular-ui/ui-router/wiki) 链接寻求帮助。
你能附上一个plunkr吗？

标签： javascript angularjs

【解决方案1】：

您在相同的元素上同时使用了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

【讨论】：