Question

我正在尝试nodeJS，SailsJS＆amp;角。我想用这个加载栏： http://chieffancypants.github.io/angular-loading-bar/ https://github.com/chieffancypants/angular-loading-bar

我自动读取加载栏句柄http请求。所以我这样做：

npm install angular-loading-bar.

我把jss和css放在资产中。

这是我的LoginModule：

var LoginModule = angular.module('LoginModule', ['angular-loading-bar']);

我的LoginController：

angular.module('LoginModule')
    .controller('LoginController', LoginController);

LoginController.$inject = ['$scope', '$http', 'cfpLoadingBar'];

function LoginController($scope, $http, cfpLoadingBar) {

    // Get CSRF token and set as header
    $http.defaults.headers.post['X-CSRF-Token'] = document.getElementsByName('_csrf')[0].value;

    $scope.submitLoginForm = function() {
        $scope.start();
        $http.post('/login', {
                identifiant: $scope.login.identifiant,
                password: $scope.login.password
            })
            .then(function onSuccess() {
                window.location = '/home/';
            })
            .catch(function onError(response) {
                console.log(response);
            })
    }

    $scope.start = function() {
        cfpLoadingBar.start();
    };
    $scope.complete = function() {
        cfpLoadingBar.complete();
    };
}

但是当我登录表格时：

  <div class="container-fluid" ng-app="LoginModule" ng-controller="LoginController" ng-cloak>
    <div class=" col-lg-offset-4 col-lg-4">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">Connexion</h3>
        </div>
        <div class="panel-body">
          <h5 class="col-lg-12" style="text-align: center">Admin !</h5>
          <form ng-submit="submitLoginForm()" class="col-lg-offset-3 col-lg-6 form-group" name="loginForm">
            <input type="text" class="form-control" id="inputLogin" name="inputLogin" placeholder="Identifiant" ng-model="login.identifiant">
            <input type="password" class="form-control" id="inputPassword" name="inputPassword" placeholder="Mot de passe" ng-model="login.password">
            <br>
            <button type="submit" class="btn btn-primary" style="float: right">Connexion</button>
            <input type="hidden" name="_csrf" value="<%= _csrf %>">
          </form>
        </div>
      </div>
    </div>
  </div>

当我提交表单（表单工作）时，我没有看到加载栏:(为什么？当我尝试在LoginModule中加载ngAnimate时，我有一个错误

我在元素HTML上尝试了函数start（）但没有...

Answer 1

您必须包含angular-animate.min.js才能使其正常运行同样也包括在git仓库示例中。当我删除这一行

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-animate.min.js"></script>

它停止工作请确保包含动画文件。这就是ngAnimate也给出错误

的原因

模块AngularJS加载栏不起作用

1 个答案: