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' 
];