Question

我看过类似的问题，但我似乎无法理解我所缺少的东西。基本上，我有一个从服务器获取数据的服务，我试图通过UI-Router的resolve属性将这些数据放入控制器。但是，经过大量的教程和文档后，我无法让控制器找到数据，可以这么说。一切都是未定义的。我希望有人可以帮助我了解正在发生的事情。我的代码如下。

services.js

myServices.factory('SoundCloudService', ['$http', '$log', '$sce', function($http, $log, $sce) {
    function getPlayerHtml() {
        return $http.get('/get-site-data').then(function(oEmbed) {
            return $sce.trustAsHtml(oEmbed.data.player);
        });
    };

    function getSiteAbout() {
        return $http.get('/get-site-data').then(function(oEmbed) {
            return $sce.trustAsHtml(oEmbed.data.about);
        });
    }

    function getAllTracks() {
        return $http.get('/get-all-tracks').then(function(tracks) {
            return JSON.parse(tracks.data);
        });
    };

    function getAllPlaylists() {
        return $http.get('/get-playlists').then(function(playlists) {
            return JSON.parse(playlists.data);
        })
    };

    function getPlaylist(pid) {
        return $http.post('/get-playlist', pid, $http.defaults.headers.post).then(function(playlist) {
            return playlist.data;
        });
    };

    function getXMostTrendingFrom(x, playlist) {
        var i, trending = [];
        playlist.sort(function(a, b) { return b.playback_count - a.playback_count} );
        for(i=0;i<x;i++) {
            trending.push(all_tracks[i]);
        }
        return trending;
    };

    return {
        getAllTracks: getAllTracks,
        getAllPlaylists: getAllPlaylists,
        getPlayerHtml: getPlayerHtml,
        getSiteAbout: getSiteAbout,
        getXMostTrendingFrom: getXMostTrendingFrom,
        getPlaylist: getPlaylist,
    };
}]);

app.js

myApp.config(['$stateProvider', '$urlRouterProvider', 'ngMetaProvider',
    function($stateProvider, $urlRouterProvider, ngMetaProvider) {
        $urlRouterProvider.otherwise('/');
        $stateProvider
            .state('main', {
                url: '',
                template: '<ui-view/>',
                abstract:true,
                controller: 'MainController',
                resolve: {
                    player: function(SoundCloudService) { return SoundCloudService.getPlayerHtml(); },
                    about: function(SoundCloudService) { return SoundCloudService.getSiteAbout(); },
                }
            })
            .state('main.home', {
                url: '/',
                templateUrl: '../static/partials/home.html',
                controller: 'IndexController',
            })
            .state('main.team', {
                url: '/team',
                templateUrl: '../static/partials/team.html',
                controller: 'TeamController',
            })
            .state('main.contact', {
                url: '/contact',
                templateUrl: '../static/partials/contact.html',
                controller: 'ContactController',
            })
            .state('main.resources', {
                url: '/resources',
                templateUrl: '../static/partials/resources.html',
                controller: 'ResourcesController',
            })
            .state('main.listen-to', {
                url: '/listen-to',
                templateUrl: '../static/partials/listen-to.html',
                controller: 'ListenController',
            })
            .state('main.listen-to.season', {
                url: '/listen-to/:season',
                templateUrl: '../static/partials/listen-to.season.html',
                controller: 'ListenController',
            })
            .state('main.listen-to.season.episode', {
                url: '/listen-to/:season/:episode',
                templateUrl: '../static/partials/listen-to.season.episode.html',
                controller: 'ListenController',
            })
            .state('main.read', {
                url: '/read',
                templateUrl: '../static/partials/read.html',
                controller: 'ReadController',
            })
            .state('main.read.post', {
                url: '/read/:post',
                templateUrl: '../static/partials/read.post.html',
                controller: 'ReadController',
            })
            }
]);

controller.js

myControllers.controller('MainController', ['$scope', '$log', 'PageTitleService',
    function($scope, $log, PageTitleService, player) {
        $log.log(player); /* This is always undefined */
    }
]);

[UPDATE]

正如Hadi在下面的答案中指出的那样，我将player放在数组中，控制器现在看起来像这样：

skodenControllers.controller('MainController', ['$scope', '$log', '$sce', 'PageTitleService', 'player',
    function($scope, $log, $sce, PageTitleService, player) {
        $log.log(player);
    }
]);

控制台显示数据，但仅在出现错误后才显示：

错误：[$ injector：unpr] http://errors.angularjs.org/1.3.2/ $注射器/ unpr？P0 = playerProvider％20％3 C-％20player 在angular.js：38 在angular.js：3930 at Object.d [as get]（angular.js：4077）在angular.js：3935 在d（angular.js：4077） at Object.e [as invoke]（angular.js：4109）在F.instance（angular.js：8356）在angular.js：7608 在r（angular.js：347）在我（angular.js：7607）

希望有人能带领我朝着正确的方向前进。

Answer 1

您忘记了将player传递到数组中。改为这个

  myControllers.controller('MainController', ['$scope', '$log', 
 'PageTitleService','player',
    function($scope, $log, PageTitleService, player) {
    $log.log(player); /* This is always undefined */
   }
]);

Answer 2

由于 myServices 和 myControllers 都是模块，请确保将它们添加为myApp模块的依赖项。

// init myApp module
angular.module('myApp', ['myServices', 'myControllers']);

修改

一些线索：

According to the documentation，当使用ui-router嵌套视图时，子视图（状态名称= main.xxx）必须声明父状态，因此您必须添加parent: "main"或子视图不会继承main状态控制器

的已解析属性

由于siteDate是在SoundCloudService（services.js：23）中异步加载的，因此无法确定它是否会在同时加载的控制器中可用。相反，向getSiteDate()添加SoundCloudService方法，返回一个承诺。然后缓存 siteData 并立即通过promise返回。

例如：

/** * @name getSiteData * @description Scrap site data * @returns {promise} a promise */ function getSiteData() { var deferred = $q.defer(); if(siteData) { deferred.resolve(siteData); } else { $http.get('/get-site-data').then(function(response) { siteData = response.data; deferred.resolve(siteData); }, function(err) { deferred.reject(err.message); }); } return deferred.promise; }

为什么要尝试将SoundCloudService映射到siteData？您只需在使用它的控制器中注入SoundCloudService：

例如：

skodenControllers.controller('MainController', ['$scope', '$log', '$sce', 'PageTitleService', 'SoundCloudService', function($scope, $log, $sce, PageTitleService, SoundCloudService) { // Note: getSiteData() could use a cache inside the service SoundCloudService.getSiteData().then(function(siteData) { ... }); }

UI Resolve没有注入控制器（数据未定义）

2 个答案: