Question

在我的项目中，用户可以从外部API搜索闪存卡集的类别。返回信息时，使用ng-repeat显示每组的名称。我还在ng-repeat上附加了一个ng-click函数，它复制了set 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;
  };



});

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

Answer 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，前端缓存和什么不是。如果resolve失败，则不会加载状态。有关详情，请访问official docs

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

1 个答案: