UI的路线的决心不工作 [英] ui-route resolve not working

问题描述

我的应用程序需要一些基本的数据开始。这就是为什么我创建了一个服务，我用它作为模型为常见的数据，以便它可以是所有控制器访问。我试图用UI路由的reslove功能，说如果我回到一个承诺则控制器的执行开始之前将得到解决，以解决服务，但它不为我工作。这里是我的code

服务：

  VAR数据=功能（$ Q $ HTTP）{
VAR列表= {};
VAR cachedData;
VAR resolveData;resolveData =功能（）{
    返回$ http.get（'/ API /数据）
        。然后（功能（响应）{
            变种推迟= $ q.defer（）;            deferred.resolve（list.setData（response.data））;            返回deferred.promise;
        }，函数（响应）{
        }）;
};list.getData =功能（）{
    如果（cachedData）{
        返回cachedData;
    }
    其他{
        resolveData（）;
    }
};list.setData =功能（数据）{    cachedData =数据;    返回的数据;
};
返回列表;
};数据$注射='$ Q，$ HTTP']。
 

路线：

  .STATE（'临时'，{
        网址：'温度'，
        templateUrl：'/ TEMP，
        控制器：'温度'，
        解析：{
            数据：功能（数据）{
                返回data.getData（）;
            }
        }
    }）
 

控制器：

  VAR临时=功能（数据，$范围）{
    的console.log（'阿萨德'）;
    $ scope.showLoading = TRUE;    $范围prefixes = data.something。 //不工作    $ scope.lists =数据;
};。临时$注射= ['数据'，'$范围'];
 

解决方案

第一，它会更容易与plunker工作。

但似乎功能的getData不返回任何承诺。

我会改变的getData（）来是这样的：

  list.getData =功能（）{
变种推迟= $ q.defer（）;
如果（cachedData）{
    deferred.resolve（cachedData）;
}其他{
    resolveData（），然后（deferred.resolve）.catch（deferred.reject）。
}返回deferred.promise;
};
 

顺便说一句，我也将发生变化resolveData（）为：

  resolveData =功能（）{
    变种推迟= $ q.defer（）;    $ http.get（'/ API /数据）
        。然后（功能（响应）{
            list.setData（response.data）;
            deferred.resolve（response.data）;
        }）;    返回deferred.promise;
};
 

My Application needs a some basic data to start. That's why i created a service and I am using it as model for that common data so that it can be accessible to all the controllers. I am trying to resolve the service using ui-route's reslove functionality that says if I return a promise then it will be resolved before the controller's execution begin but it is not working for me. here is my code

service:

var Data = function ($q, $http) {
var list = {};
var cachedData;
var resolveData;

resolveData = function () {
    return $http.get('/api/data')
        .then(function (response) {
            var deferred = $q.defer();

            deferred.resolve(list.setData(response.data));

            return deferred.promise;
        }, function (response) {
        });
};

list.getData = function () {
    if (cachedData) {
        return cachedData;
    }
    else {
        resolveData();
    }
};

list.setData = function (data) {

    cachedData = data;

    return data;
};
return list;
};

Data.$inject = ['$q', '$http'];

Route:

.state('temp', {
        url: 'temp',
        templateUrl: '/temp',
        controller: 'temp',
        resolve: {
            data: function (data) {
                return data.getData();
            }
        }
    })

Controller:

var temp = function(data, $scope){
    console.log('asad');
    $scope.showLoading = true;

    $scope.prefixes = data.something; //not working

    $scope.lists = data;
};

temp.$inject = ['data', '$scope'];

解决方案

first, it will be easier to work with a plunker.

But it seems like the function getData doesn't return any promise.

I will change getData() to something like:

list.getData = function () {
var deferred = $q.defer();
if (cachedData) {
    deferred.resolve(cachedData);
} else {
    resolveData().then(deferred.resolve).catch(deferred.reject);
}

return deferred.promise;
};

btw, I will also change resolveData() to:

resolveData = function () {
    var deferred = $q.defer();

    $http.get('/api/data')
        .then(function (response) {
            list.setData(response.data);
            deferred.resolve(response.data);
        });

    return deferred.promise;
};

这篇关于UI的路线的决心不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！