AngularJS: Компонент и зависимость инъекций

Question

я после модуля:

angular.module("individual-footprint") 
     .controller("individualFootprintController", individualFootprintController) 
     .value("currentUser"); 

контроллер для этого модуля:

function individualFootprintController($http, individualFootprintService, currentUser) { 
     var self = this; 
     $http.get("/user").success(function (data) { 
      if (data.name) { 
       currentUser = data; 
       self.authenticated = true; 
      } 
     }) 

И следующий компонент:

angular.module("individual-footprint") 
     .component('employeeInfoComponent', { 
      template:'Logged in as: <span ng-bind="$ctrl.user"></span>', 
      controller: function (currentUser) { 
       if (currentUser.name) { 
        self.user = currentUser.name; 
       } 
      } 
     }); 

Мой HTML выглядит следующим образом:

<div ng-controller="individualFootprintController as $ctrl"> 
    <div ng-hide="$ctrl.authenticated"> 
     <h1>Login</h1> 
     With Corporate Account: <a href="/login/corporate">click here</a> 
    </div> 
    <div ng-show="$ctrl.authenticated" > 
     <employee-info-component></employee-info-component> 
    </div> 

Извините, я новичок в AngularJS, и, вероятно, я что-то неправильно использую. Мое предположение: .value("currentUser"); - глобальная переменная, я могу впрыснуть ее и изменить ее везде, где захочу. Но я получаю TypeError: Cannot read property 'name' of undefined. Не могли бы вы предложить лучшее решение для моего глобального var?

Answer 1

Вы должны определить значение как {} (пустой объект) для переменной currentUser. В настоящее время вы делаете currentUser.name внутри компоненту контроллера, где вы пытаетесь получить доступ name свойства из undefined переменных, поскольку она выдает ошибку TypeError: Cannot read property 'name' of undefined

.controller("individualFootprintController", individualFootprintController) 
.value("currentUser", {}); //value currentUser defined as blank object