Angular - $ rootScope變量

在我的Angular 1.5應用程序（SPA）中，我在應用程序的每個「頁面」上使用用戶配置文件信息。所以，在我的app.js文件，我包括下面的代碼：

$http.get(API_URL + "/user") 
      .then(function success(response){ 
       $rootScope.userInfo = response.data; 
      }, 
      function error(response){ 

      });

然後在每個組件的控制器和模板，我參考這個對象如下所示：

<img class="profile icon" ng-src="{{$rootScope.userInfo.profile_photo}}">

然而，圖像從不出現。我假設，因爲回調設置的響應中的$ rootScope.userInfo在模板加載後調用。如何確保GET響應中的響應來自它？

編輯 - 下面是更多信息，因爲有關「在視圖中不使用$ rootScope」的答案不適用於我。建議的更改不起作用。在這種情況下，我需要引用$ ctrl嗎？

angular.module('xxx') 
     .component("navBar", { 
      templateUrl: "/components/navBar/navBar.html", 
      controller: NavBarController, 
      bindings: { 

      } 
     }); 

function NavBarController($rootScope, $scope, $uibModal, $timeout, $http, API_URL) { 
     var vm = this;

來源

2016-10-31 bluedevil2k

我相信你不必在'$ rootScope'前加上路徑，即試試'ng-src =「{{userInfo.profile_photo}}」'。 –

範圍***總是***在組件中隔離。請參閱https://docs.angularjs.org/guide/component#!/。因此，組件不會繼承或訪問'$ rootScope'。無論如何，使用'$ rootScope'被許多人認爲是反模式;建議使用服務來存儲持久數據，並要求在與組件結合使用服務時使用服務。雖然你*可能*能夠使用'$ root'來解決這個限制，這不是推薦的行爲。 – Claies

記住的觀點是BOU第二到$scope已經，你從來不寫以下

<img class="profile icon" ng-src="{{$scope.userInfo.profile_photo}}">

代替

<img class="profile icon" ng-src="{{userInfo.profile_photo}}">

所有範圍，除了隔離範圍，有傳承與$rootScope在該鏈的頂端，所以只要沒有其他$scope具有在鏈書面方式

<img class="profile icon" ng-src="{{userInfo.profile_photo}}">

一個userInfo屬性將指向PROPERT Ÿ在$rootScope

如果你是一個分離的範圍內，你可以寫

<img class="profile icon" ng-src="{{$root.userInfo.profile_photo}}">

因爲所有的範圍，甚至孤立

，有一個$root屬性指向$rootScope

入住這裏

angular.module('app', []) 
 
    .controller('TestCtrl', function($scope) { 
 
    // An empty controller to create a new scope 
 
    // Only for demonstration of inheritance 
 
    }) 
 
    .directive('directive', function() { 
 
    return { 
 
     restrict: 'E', 
 
     scope: {}, 
 
     template: '<div>{{$root.userInfo.name}}</div>' 
 
    }; 
 
    }) 
 
    .run(function($rootScope) { 
 
    $rootScope.userInfo = { 
 
     name: 'John' 
 
    }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app"> 
 
    <div>{{userInfo.name}}</div> 
 
    <div ng-controller="TestCtrl"> 
 
    {{userInfo.name}} 
 
    </div> 
 
    <directive></directive> 
 
</div>

來源

2016-10-31 13:30:22 devconcept

不同，組件始終是孤立的，'$ root'可能是必需的，但不建議這種情況。 – Claies

@Claies我知道，但只要OP不改變他的應用程序的設計，這是他的工作解決方案。你不知道變化的成本，即使他改變了工作方式，那麼它也會受到另一個問題的影響。對於他目前的問題，這是解決方案。 – devconcept

只要使用，

<img class="profile icon" ng-src="{{userInfo.profile_photo}}">

DEMO

來源

2016-10-31 13:14:29 Sajeetharan

請參閱我的編輯。此解決方案不起作用，可能是因爲我如何設置組件 – bluedevil2k

你沒有把$rootScope鑑於你應該把這樣的

<img class="profile icon" ng-src="{{userInfo.profile_photo}}">

來源

2016-10-31 13:15:43

與我給出的答案有什麼不同？ – Sajeetharan

@Sajeetharan他發佈了2秒後，你沒有看到你的答案 –

不是2秒實際上1分鐘 – Sajeetharan

Angular - $ rootScope變量

回答

相關問題