無法訪問AngularJS中的作用域值。控制檯日誌返回undefined

Question

我在ui-view中爲我的應用程序和嵌套控制器使用ui-router。我父控制器看起來是這樣的：

'use strict'; 

angular.module("discussoramaApp").controller("mainController", ["RestFullResponse", "Restangular", "localStorageService", "$scope", function(RestFullResponse, Restangular, localStorageService, $scope){ 

    var currentId = localStorageService.get("***"); 

    var user = Restangular.one("users", currentId); 
    var Profile = user.get({}, {"Authorization" : localStorageService.get('***')}).then(function(profile) { 
    $scope.profile = profile; 
    }); 

}]); 

而且我的孩子控制器：

'use strict'; 

angular.module("discussoramaApp").controller("getTopicsController", ["RestFullResponse", "Restangular", "localStorageService", "$scope", function(RestFullResponse, Restangular, localStorageService, $scope){ 

    var topics = Restangular.all('topics'); 
    var allTopics = topics.getList({},{"Authorization" : localStorageService.get('***')}).then(function(topics){ 
    $scope.topics = topics; 
    }); 

    console.log($scope); // this works 
    console.log($scope.profile); // this returns undefined 

}]); 

我有越來越爲孩子控制器配置文件中繼承$範圍值的問題。當我登錄$ scope時，配置文件清晰可見。

但是當我嘗試登錄$ scope.profile控制檯返回undefined。有任何想法嗎？

編輯：添加我的ui路由器配置。

angular.module("discussoramaApp").config(
    function($stateProvider, $urlRouterProvider){ 
    $urlRouterProvider.otherwise('/home'); 
    $urlRouterProvider.when('', '/home'); 

    $stateProvider 

     .state('main',{ 
     url: '', 
     templateUrl: 'partials/main.html', 
     requireLogin: true 
     }) 

     .state('main.home',{ 
     url: '/home', 
     templateUrl: 'partials/main.home.html', 
     requireLogin: true, 
     title: 'Home' 
     }); 

    } 
); 

而且相應的HTML文件：

// main.html 
<div ng-controller="mainController"> 

    <div class="container"> 
    <div ui-view></div> 
    </div> 

</div> 

和子html部分：

// main.home.html 
<div ng-controller="getTopicsController"> 
    <div ng-repeat="topic in topics | filter:search"> 
    <a ui-sref="main.topic({id: topic.id})">{{ topic.topic_title }}</a> 
    </div> 
</div> 

UPDATE：與子控制器設置這樣的守望者解決了這個。感謝@jonathanpglick和@Nix的幫助。

$scope.$watch('profile', function(profile) { 
    if(profile) { 
    $window.document.title = "Discussorama | " + profile.user.name; 
    } 
}); 

Answer 1

$scope.profile被異步請求後置，所以我懷疑第二控制器被前user.get()回報實例化並分配一個值$scope.profile。

我想你會想要在子控制器中設置一個觀察者（如$scope.$watch('profile', function(profile) {});），這樣你就可以在配置文件變得可用或更改時執行操作。

此外，您可以在$scope控制檯日誌$scope上看到profile鍵的原因可以在這裏解釋：https://stackoverflow.com/a/7389177/325018。調用對象時，您需要使用console.dir()來獲取對象的當前狀態。

UPDATE：

我正在使用的用戶界面，路由器等有一個更簡單的方法來做到這一點剛剛意識到。 ui路由器有一個resolve對象，您可以使用它來依賴注入像這樣的東西到您的控制器。每個解析函數只需要返回一個值或一個承諾，它就可以用解析密鑰名稱注入到控制器中。它會看起來像你這樣：

angular.module("discussoramaApp").config(
    function($stateProvider, $urlRouterProvider){ 
    $urlRouterProvider.otherwise('/home'); 
    $urlRouterProvider.when('', '/home'); 

    $stateProvider 

     .state('main',{ 
     url: '', 
     templateUrl: 'partials/main.html', 
     requireLogin: true, 
     resolve: { 
      profile: ['Restangular', 'localStorageService', function(Restangular , localStorageService) { 
      var currentId = localStorageService.get("***"); 
      var user = Restangular.one("users", currentId); 
      return user.get({}, {"Authorization" : localStorageService.get('***')}); 
      } 
     } 
     }) 

     .state('main.home',{ 
     url: '/home', 
     templateUrl: 'partials/main.home.html', 
     requireLogin: true, 
     title: 'Home' 
     }); 

    } 
); 

angular.module("discussoramaApp").controller("mainController", ["profile", "$scope", function(profile, $scope){ 
    $scope.profile = profile; 
}]); 

Answer 2

只是因爲你有嵌套的範圍，但這並不意味着它會等待user.get()來實例化您的嵌套getTopicsController前返回。

您的問題是：

1. mainController控制器初始化，並呼籲user.get()
2. getTopicsController初始化和日誌console.log($scope.profile)
3. 的呼叫user.get()回報，然後設置的範圍。

這是一個常見問題，如果您需要確定設置了$scope.profile，請使用resolve或觀察變量。

我居然給了一個如何這個今天早些時候做了一個例子：AngularJS $rootScope.$broadcast not working in app.run