UI解決方案沒有注入控制器（數據未定義）

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]

爲P通過哈迪在下面的答案ointed出來，我放置player陣列中，並且控制器現在看起來像這樣：

Error: [$injector:unpr] http://errors.angularjs.org/1.3.2/ $injector/unpr?p0=playerProvider%20%3C-%20player at angular.js:38 at angular.js:3930 at Object.d [as get] (angular.js:4077) at angular.js:3935 at d (angular.js:4077) at Object.e [as invoke] (angular.js:4109) at F.instance (angular.js:8356) at angular.js:7608 at r (angular.js:347) at I (angular.js:7607)

：

​​

控制檯DOES只有一個錯誤等後顯示數據，但

希望有人能帶領我走向正確的方向。

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路由器嵌套的意見，孩子的意見（國家名稱= main.xxx）必須聲明父狀態時，讓你必須添加parent: "main"或子視圖不會繼承main狀態控制器的已解析屬性

• 由於siteDate是在SoundCloudService（services.js：23）中異步加載的，因此無法確定它會在您同時加載的控制器中可用。 取而代之，將getSiteDate()方法添加到SoundCloudService，它返回一個承諾。 siteData然後被緩存，並立即返回承諾。

例如：

/** 
* @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) { 
     ... 
    }); 
    }