Angular 服务问题

Question

我需要一些帮助来理解以下 angular 服务代码中的错误。

编辑：我在不同的 js 文件中有几个控制器使用 CRUD API like

$http.get('/api/sites/' + service.siteID)

或者只需要像

这样的变量指令

templateUrl: '../../' + service.template + ' + '.html'

所以我创建了一个服务来在所有 js 文件之间共享这些变量，而不是在每个文件中进行 api 调用。

这是服务

app.service('SharedData', function($http) {

$http.get('config.json') 
    .success (function(data) {  
        var siteID = data._id;
        console.log(siteID); // return 553e2d15f91e4bd75d000008

         $http.get('/api/sites/' + siteID)
            .success(function(site) {
                var template = site.template;
                console.log(template); // return myTemplate
            })
            .error(function(data) {
                console.log('Error: ' + data);
            })
    })
    .error(function(data) {
        console.log('Error: ' + data);
    })

service = {
    siteID :    siteID, // return undefined instead of 553e2d15f91e4bd75d000008
    template :  template // return undefined instead of myTemplate                      
    };

return service;
})

我只是想做个精确。如果我像下面这样写我的服务，它工作正常，我的意思是值在所有控制器和指令中传递得很好

app.service('SharedData', function() {
service = {
    siteID : '553e2d15f91e4bd75d000008',
    pageID : '553e2d15f91e4bd75d000009',
    template : 'template1',
    layout : 'home'
    };

return service;
})

非常感谢

编辑

我已将服务更改如下

app.factory('SharedData', function($http) {
service = {};
$http.get('config.json') 
    .success (function(data) {  
        service.siteId = data._id; 
        //console.log(service.siteId);

        $http.get('/api/sites/' + service.siteId)
            .success(function(site) {
                service.template = site.template;
                //console.log(service.template);
            })
    })
service.pageID = '553e2d15f91e4bd75d000009';
service.layout = 'home'
return service
})

在控制器中 console.log(服务) return 具有所有值的对象：

layout: "home"
pageID: "553e2d15f91e4bd75d000009"
siteId: "553e2d15f91e4bd75d000008"
template: "template1"

console.log('Layout is ' + service.layout); // return home
console.log('PageID is ' + service.pageID); // return 553e2d15f91e4bd75d000009

但是

console.log('siteID is ' + service.siteId); // return undefined  !!!!!
console.log('template is ' + service.template); // return undefined !!!!!

不明白请帮助

Answer 1

您的 siteID 变量在 $http.get 方法的范围之外被引用。

像这样在函数上方定义 siteID：

app.service('SharedData', function($http) {
var siteID = '';
$http.get('config.json') 
    .success (function(data) {  
        siteID = data._id;
        console.log(siteID); // return 553e2d15f91e4bd75d000008

         $http.get('/api/sites/' + siteID)
            .success(function(site) {
                var template = site.template;
                console.log(template); // return myTemplate
            })
            .error(function(data) {
                console.log('Error: ' + data);
            })
    })
    .error(function(data) {
        console.log('Error: ' + data);
    })

service = {
    siteID :    siteID, // return undefined
    template :  template,                       
    };

return service;
})

Answer 2

您没有正确构建对象。您需要先定义对象，然后为对象属性赋值：

app.service('SharedData', function($http) {

var service = {
    siteID :    '', // return undefined
    template :  '',                       
    };

$http.get('config.json') 
    .success (function(data) {  
        service.siteID = data._id;
        console.log(siteID); // return 553e2d15f91e4bd75d000008

         $http.get('/api/sites/' + siteID)
            .success(function(site) {
                service.template = site.template;
                console.log(template); // return myTemplate
                return service;
            })
            .error(function(data) {
                console.log('Error: ' + data);
            })
    })
    .error(function(data) {
        console.log('Error: ' + data);
    })



})

我不完全确定你是否正确理解了你应该如何在你的控制器中使用该服务，所以这是我设置的一个小演示：

Services Demo

Answer 3

我从 Google 组

得到了帮助

“您正在异步获取信息。简单地说，在您注销时信息尚不可用。只有当 $http 调用是 'done' 时，您才会在您的控制器中提供可用信息。在调试器屏幕中，服务是一个 'live' 对象，因此它会被更新。数据不是一个对象（在那个时候）并且是这样记录的。查看 $q 服务，了解 promise 在 angular 中的工作原理。"

下面是如何解决 $q

的问题

service = {};
    app.service('GetSiteID', function ($http) {
        return $http.get('config.json') 
        .then (function(response) { 
            service.siteID = response.data._id
            return service.siteID
   });
})  
app.service('GetTemplateAndPages', function (GetSiteID, $http, $q) {
    return GetSiteID
        .then(function(id) {
        return $http.get('/api/sites/' + id)
            .then (function(response) {
                var data = response.data;
                service.template = response.data.template;
                service.pages = response.data.pages;
                return service.template;
                return service.pages
       })
    })
})  
app.service('SharedData', function (GetSiteID, GetTemplateAndPages, $q) {
    return $q.all([GetSiteID, GetTemplateAndPages]) 
        .then (function(response) {
         return service
    })
})

然后像

一样在控制器中使用它

app.controller('pagesController', function(SharedData, $scope, $http) {
    SharedData.then(function(service) {
      console.log(service);
      console.log('Site ID is ' + service.siteID); 
      console.log('Template is ' + service.template);
      console.log('Pages are ' + service.pages);
   })
});

Angular 服务问题

Angular services issue

javascript

angularjs

angularjs-service