Question

我对这个错误感到困惑，事情是我是angularjs和ES6的新手。我有一个登录控制器，它调用一个服务来检查用户是否在数据库中注册。我似乎在使用这个时遇到了问题。我得到的消息错误是：

TypeError：无法读取未定义的属性“login” 在......

我的 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数组和构造函数中传递所有依赖项。

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

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

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

1 个答案: