TypeError：无法读取ES6控制器中未定义的属性''

Question

我被这个错误卡住了，事情是我是angularjs和ES6的newby。 我有一个登录控制器调用一个服务，检查用户是否在数据库中注册。 看来我有一个问题，使用这个。 消息错误，我得到的是这些：

类型错误：无法读取的不确定 财产 '登录' ...

我LoginController.js

class LoginController { 
    constructor($rootScope, $scope, $timeout, $q, SwapSvc, $state) { 

     this.submit = this.submit.bind(this) 
     this.$timeout = $timeout 
     this.SwapSvc = SwapSvc; 
     this.$state = $state; 
     this.status = { 
      loading: false 
     } 
    } 

    submit(username, password) { 
     this.status.loading = true 
     return this.SwapSvc 
     .login(username,password) 
     .then((data)=>{ 
      console.log(`los datos recibidos son: ${data.nombre} ${data.apellidos} `); 
      this.status.loading = false 
      this.$state.go('main')//ir a pantalla ppal 
      return data; 
     }) 
     .catch((err)=>{ 
      //tratar error 
      console.log(`error, no hay respuesta`); 
      this.status.loading = false 
     }); 
    } 
} 
LoginController.$inject = ['$state', 'SwapSvc']; 
export default LoginController 

哪里SwapSvc是服务检查用户是否已注册。

我的login.html

<div class="app-container app-login" ng-class="{__loading: vm.status.loading}"> 
    <div class="flex-center"> 
    <div class="app-header"></div> 
    <div class="app-body"> 
    <!--"spinner"...--> 
     <div class="loader-container text-center"> 
      <div class="icon"> 
      <div class="sk-folding-cube"> 
       <div class="sk-cube1 sk-cube"></div> 
       <div class="sk-cube2 sk-cube"></div> 
       <div class="sk-cube4 sk-cube"></div> 
       <div class="sk-cube3 sk-cube"></div> 
       </div> 
      </div> 
      <div class="title">Entrando en su Dashboard...</div> 
     </div> 
     <div class="app-block"> 
     <div class="app-form"> 
     <div class="form-header"> 
      <div class="app-brand"><span class="highlight">ReHand</span> Dashboard</div> 
     </div> 
     <form ng-submit="vm.submit(vm.username, vm.password)"> 
      <div class="input-group"> 
       <span class="input-group-addon"> 
       <i class="fa fa-user" aria-hidden="true"></i></span> 
       <input type="email" class="form-control" placeholder="Usuario" ng-model="vm.username"> 
      </div> 
      <div class="input-group"> 
       <span class="input-group-addon"> 
       <i class="fa fa-key" aria-hidden="true"></i></span> 
       <input type="password" class="form-control" placeholder="Contraseña" ng-model="vm.password"> 
      </div> 
      <div class="text-center"> 
       <input type="submit" class="btn btn-success btn-submit" value="Login"> 
      </div> 
     </form> 
     </div> 
     </div> 
    </div> 
    <div class="app-footer"> 
    </div> 
    </div> 
</div> 

和我的路线是

.state("login", { 
     url: "/login", 
     controller: LoginController, 
     controllerAs: "vm", 
     templateUrl: 'pages/pages/login.html' 
    }) 

请帮帮忙，我完全提前

Answer 1

您的服务失去了... 谢谢没有定义，因为你没有正确注入你的依赖关系。 $inject种类将数组中的值映射到构造函数中的位置。所以，$rootscope实际上是$state和$scope是你的服务。为了解决这个问题，你需要通过$inject这个数组的所有Dependecies和你的构造函数。

constructor($rootScope, $scope, $timeout, $q, SwapSvc, $state) { } 

LoginController.$inject = [ 
    '$rootScope', 
    '$scope', 
    '$timeout', 
    '$q', 
    'SwapSvc', 
    '$state' 
];