AngularJS:错误:试图在ng-submit指令中分配给只读属性

我正在为练习angularJS进行个人项目，但我遇到了一个无法解决的问题。

我想在提交表单时LoginCtrl.js使用submitLogin()功能，但 Safari 浏览器中的错误控制台显示$scope.submitLogin readonly property，所以我无法弄清楚出了什么问题。

如何解决只读属性错误？以及导致此错误的原因？

我得到的错误如下：

Error: Attempted to assign to readonly property.
http://localhost:8080/js/controllers/LoginCtrl.js:6:13
[native code]
instantiate@http://localhost:8080/libs/angular/angular.js:4723:61
$controller@http://localhost:8080/libs/angular/angular.js:10192:39
link@http://localhost:8080/libs/angular-route/angular-route.js:1017:37
http://localhost:8080/libs/angular/angular.js:1266:23
invokeLinkFn@http://localhost:8080/libs/angular/angular.js:9757:15
nodeLinkFn@http://localhost:8080/libs/angular/angular.js:9156:23
compositeLinkFn@http://localhost:8080/libs/angular/angular.js:8459:23
publicLinkFn@http://localhost:8080/libs/angular/angular.js:8339:45
lazyCompilation@http://localhost:8080/libs/angular/angular.js:8677:30
boundTranscludeFn@http://localhost:8080/libs/angular/angular.js:8476:28
controllersBoundTransclude@http://localhost:8080/libs/angular/angular.js:9206:37
update@http://localhost:8080/libs/angular-route/angular-route.js:975:36
$broadcast@http://localhost:8080/libs/angular/angular.js:17701:33
http://localhost:8080/libs/angular-route/angular-route.js:615:36
processQueue@http://localhost:8080/libs/angular/angular.js:16104:30
http://localhost:8080/libs/angular/angular.js:16120:39
$eval@http://localhost:8080/libs/angular/angular.js:17378:28
$digest@http://localhost:8080/libs/angular/angular.js:17191:36
$apply@http://localhost:8080/libs/angular/angular.js:17486:31
done@http://localhost:8080/libs/angular/angular.js:11637:53
completeRequest@http://localhost:8080/libs/angular/angular.js:11843:15
requestLoaded@http://localhost:8080/libs/angular/angular.js:11776:24 – "<div ng-view="" class="ng-scope">"

index.html（仅包含JavaScript部分）

...
  <!-- JS -->
  <script src="libs/angular/angular.js"></script>
  <script src="libs/angular-route/angular-route.js"></script>
  <script src="libs/angular-cookies/angular-cookies.js"></script>

  <!-- ANGULAR COMSTOM -->
  <script src="js/controllers/MainCtrl.js"></script>
  <script src="js/controllers/NerdCtrl.js"></script>
  <script src="js/controllers/LoginCtrl.js"></script>
  <script src="js/services/NerdService.js"></script>
  <script src="js/services/ReviewService.js"></script>
  <script src="js/services/LoginService.js"></script>
  <script src="js/appRoutes.js"></script>
  <script src="js/app.js"></script>
</head>
<body ng-app="sampleApp">
...

appRoutes.js//负责路由的控制器

angular.module('appRoutes', []).
  config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
    $routeProvider
      .when('/', {
        templateUrl: 'views/home.html',
        controller: 'MainController'
      })
      .when('/login', {
        templateUrl: 'views/login.html',
        controller: 'LoginController'
      });

    $locationProvider.html5Mode(true);
  }]);

<div class = "row" >
  <div class= "col-md-4 col-md-offset-4">
    <h3 class = "text-center">LOGIN</h3>
    <form ng-submit="submitLogin()">    // <-
      <div class = "form-group">
        <div class="input-group">
          <span class = "input-group-addon">
            <i class="fa fa-envelope-o"></i>
          </span>
          <input id = "login_email" type="text" name="name" class="form-control input-lg" placeholder="Email"
          ng-model="login.email" required>
        </div>
      </div>
      <div class="form-group">
        <div class="input-group">
          <span class="input-group-addon">
            <i class="fa fa-asterisk" aria-hidden="true"></i>
          </span>
          <input id="login_password" type="password" name="password" class="form-control input-lg"
          placeholder="Password" ng-model="login.password" required>
        </div>
      </div>
      <button type="submit" class="btn btn-primary btn-lg btn-block btn-shadow">Login</button>
    </form>
  </div>
</div>

登录控制.js

'use strict';
angular.module('LoginCtrl', ['LoginService', 'ngCookies'])
  .controller('LoginController', [
    function($scope, Login, $cookieStore) {
      $scope.submitLogin = function() {
        Login.getToken($scope.login.email, $scope.login.password)
          .then(function(response) {
            if(response.data['success'] == true) {
              $scope.token = response.data['token'];
              $cookieStore.put('Token', $scope.token);
              //$window.alert($cookieStore.get('Token'));
            }
            else {
              $scope.token = null;
            }
        })};
}]);

登录服务.js

angular.module('LoginService', []).factory('Login', ['$http', function($http) {
  return {
    getToken : function(name, password) {
      var data = { name: name, password: password}
      $http.get('/authenticate', data);
    },
    getAllUsers: function(token) {
      $http.get('/users')
    }
  }
}])

问题是我没有在LoginService.js中返回$http.get这就是为什么Login.getToken()不是一个对象的原因

相关内容

最新更新

热门标签：