Angular$state.go

Question

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

在我的 ng-controller 中，我有这段代码可以从我的数据库中的国家 table 检索数据：

 $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'
           })

当我单击国家/地区名称 link 时，控制台会显示具有正确值的国家/地区对象，但 country.detail 模板的国家/地区对象为空。当我在函数后添加 $scope.countryDetail() 时，数据显示在详细信息模板中，但服务器中有 2 个调用！！那么如何只使用一次调用而不再次调用 $scope.countryDetail() 呢？。谢谢

Answer 1

好的。让我解释一下你在做什么：

点击 link 显示国家
加载国家并将其存储在范围内
去另一个州

那是行不通的，因为当你进入另一个状态时，当前控制器的作用域消失了：创建了一个新的作用域，并实例化了一个新的控制器。

所以，你必须做的是

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

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

另一种选择：使用状态配置的resolve参数（在文档中有解释，因此会出现以下情况：

点击 link 显示国家
转到配置为使用另一个控制器的另一个状态：CountryDetailController
ui 路由器调用 returns 国家详细信息承诺的解析函数。它等到国家可用
当国家可用时，路由器实例化 CountryDetailController 并注入国家本身
在 CountryDetailController 中，从函数参数中获取注入的国家详细信息并将其存储在范围中

Angular$state.go

Angular $state.go

state

angularjs