Question

在我的模板中，我有以下代码：<a ng-click="countryDetail(country.id)" style="cursor:pointer">{{country.name}}</a>

在我的ng-controller中，我有这段代码从我的DB中的国家/地区表中检索数据：

 $scope.countryDetail= function (id) {
        if (!id) return;
        Country.countryDetail(id)
        .then(function (data) {
            $scope.loadedCountry = Country.loadedCountry ;
             console.log($scope.loadedCountry);
            $state.go('country.detail', { 'countryId': id });
        });
    };

My service :

  countryService.countryDetail = function (id) {
        var deferred = $q.defer();
        return $http.get(countryUrl + "detail/" + id)
             .success(function (data) {
                 deferred.resolve(
                      countryService.loadedCountry = data);
             })
        .error(function (error) {
            deferred.reject(error);
        })
        return deferred.promise;
    }

在我的app.js中说明

.state('country.detail', {
               url: '^/country/detail/{countryId:[0-9]{1,6}}',
               templateUrl: 'app/country/countryDetail.html',
               controller: 'countryCtrl'
           })

当我单击国家/地区名称链接时，控制台会显示具有良好值的国家/地区对象，但country.detail模板具有空的Country对象。当我在我的功能之后添加$scope.countryDetail()时，数据显示在详细信息模板中，但是服务器中有2个呼叫！那么如何在不再调用$scope.countryDetail()的情况下只使用一个电话呢？感谢

Answer 1

行。让我来解释一下你在做什么：

点击链接以显示国家/地区
加载国家/地区并将其存储在范围
去另一个州

这不起作用，因为当你转到另一个状态时，当前控制器的范围消失了：创建了一个新的范围，并实例化了一个新的控制器。

所以，你必须做的是

点击链接以显示国家/地区
转到另一个配置为使用另一个控制器的状态：CountryDetailController
，从服务器获取国家/地区详细信息并将其存储在范围

然后它将起作用：国家细节将存储在正确的范围内，新状态的视图将显示它。

另一种选择：使用状态配置的resolve参数（在文档中对此进行了解释，以便发生以下情况：

点击链接以显示国家/地区
转到另一个配置为使用另一个控制器的状态：CountryDetailController
ui路由器调用resolve函数，该函数返回国家详细信息的承诺。它等到国家可用
当国家/地区可用时，路由器会实例化CountryDetailController并自行注入国家/地区
，从函数参数中获取注入的国家/地区详细信息并将其存储在范围中

Angular $ state.go

1 个答案: