Trying to implement a directive with $rootScope and getting an TypeError: Cannot read property '$on' of undefined

Question

我正在尝试将它添加到我的应用程序中，这是我从 link 获得的： http://www.technofattie.com/2014/07/27/easy-loading-indicator-when-switching-views-in-angular.html

这是我的应用程序中的指令：

var routeLoadingIndicator = angular.module('routeLoadingIndicator', [])
routeLoadingIndicator.directive('routeLoadingIndicator',    [function($rootScope){
  return {
  restrict:'E',
  template:"<h1 ng-if='isRouteLoading'>Loading...</h1>",
  link:function(scope, elem, attrs){
    scope.isRouteLoading = false;

  $rootScope.$on('$routeChangeStart', function(){
    scope.isRouteLoading = true;
  });

  $rootScope.$on('$routeChangeSuccess', function(){
    scope.isRouteLoading = false;
  });
}
};
}]);

这是我的 app.js 文件：

var app = angular.module('app', ['addCarCtrl', 'galleryCtrl','detailCtrl', 'userCtrl', 'ngRoute', 'AuthService', 'ErrorService', 'CarService', 'angular-filepicker', 'ngPassword', 'ngMessages','ngAnimate', 'ngTouch', 'ngSanitize', 'ngMap', 'routeLoadingIndicator'])

  app.config(function($routeProvider){
      //The route provider handles the client request to switch route
      $routeProvider.when('/addCar', {
        templateUrl: 'partials/addCar.html',
        controller: 'addCarController'
      })
      .when('/addUser', {
        templateUrl: 'partials/addUser.html',
        controllerAs: 'userCtrl',
        controller: 'UserController'
      })
      .when('/gallery', {
        templateUrl: 'partials/gallery.html',
        controller: 'galleryController'
      })
      .when('/car/:id', {
        templateUrl: 'partials/car-view.html',
        controller: 'detailController'
      })
      .when('/detail/:id', {
        templateUrl: 'partials/detail.html',
        controller: 'addCarController'
      })
      .when('/login', {
        templateUrl: 'partials/login.html',
        controllerAs: 'userCtrl',
        controller: 'UserController'
      })
      .when('/home', {
        templateUrl: 'partials/home.html',
        controller: 'galleryController'
      })

  });

这是我的 html 文件的一部分，指令为：

  <div class="row">
    <route-loading-indicator></route-loading-indicator>
  </div>

  <div ng-if='!isRouteLoading' ng-view></div>

这是我遇到的错误：

angular.js:13708 TypeError: Cannot read property '$on' of undefined
at Object.link

我不确定我遗漏了什么或做错了什么任何见解或建议都很棒！谢谢！

Answer 1

据我所知，代码错误很少。为了使其正常运行，我做了一些改动。我想它现在工作正常。错误是

var routeLoadingIndicator = angular.module('routeLoadingIndicator', []) 我认为您的项目中没有名为 routeLoadingIndicator 的模块。这是一个指令
当您以这种方式创建指令时，您需要将第一个参数作为 $rootScope 传递，然后是函数

var app = angular.module('app', ['ngRoute']);

app.config(function($routeProvider) {
    //The route provider handles the client request to switch route
    $routeProvider.when('/addCar', {
        templateUrl: 'partials/addCar.html',
        controller: 'addCarController'
      })
      .when('/addUser', {
        templateUrl: 'partials/addUser.html',
        controllerAs: 'userCtrl',
        controller: 'UserController'
      })
      .when('/gallery', {
        templateUrl: 'partials/gallery.html',
        controller: 'galleryController'
      })
      .when('/car/:id', {
        templateUrl: 'partials/car-view.html',
        controller: 'detailController'
      })
      .when('/detail/:id', {
        templateUrl: 'partials/detail.html',
        controller: 'addCarController'
      })
      .when('/login', {
        templateUrl: 'partials/login.html',
        controllerAs: 'userCtrl',
        controller: 'UserController'
      })
      .when('/home', {
        templateUrl: 'partials/home.html',
        controller: 'galleryController'
      })

  })
  .directive('routeLoadingIndicator', ['$rootScope',
    function($rootScope) {
      return {
        restrict: 'E',
        template: "<h1 ng-if='isRouteLoading'>Loading...</h1>",
        link: function(scope, elem, attrs) {
          debugger;
          scope.isRouteLoading = false;

          $rootScope.$on('$routeChangeStart', function() {
            scope.isRouteLoading = true;
          });

          $rootScope.$on('$routeChangeSuccess', function() {
            scope.isRouteLoading = false;
          });
        }
      };
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-loader.min.js"></script>

<body ng-app="app">
  <div class="row">
    <route-loading-indicator></route-loading-indicator>
  </div>

  <div ng-if='!isRouteLoading' ng-view></div>
</body>

Trying to implement a directive with $rootScope and getting an TypeError: Cannot read property '$on' of undefined

Trying to implement a directive with $rootScope and getting an TypeError: Cannot read property '$on' of undefined

javascript

angularjs

angularjs-directive

route-provider