Question

我是一个有角度的初学者。我正在尝试开发人员指南中的一个例子来帮助我学习。这是我的代码..我似乎得到一个错误 TypeError：无法读取属性＆＃39;模板＆＃39;未定义的而且我明白它说tempale是未定义的，即使它是我的$ routeProvider的一部分。但我不知道如何解决这个问题。有人可以帮忙吗？

由于

＆＃13;

angular.module('ngRouteExample', ['ngRoute']) 

  .controller('MainController', function($scope, $route, $routeParams, $location, routeTemplateMonitor) {
      $scope.$route = $route; //these are used by index.html pre for debug
      $scope.$routeParams = $routeParams;
      $scope.$location = $location;
      routeTemplateMonitor.routeMonitor();
  })

  .controller('BookController', function($scope, $routeParams) {
      $scope.name = "BookController";
      $scope.params = $routeParams;
  })

  .controller('ChapterController', function($scope, $routeParams) {
      $scope.name = "ChapterController";
      $scope.params = $routeParams;
  })

  .factory('batchLog', ['$interval', '$log', function($interval, $log) {
      var messageQueue = [];

      function log() {
          if (messageQueue.length) { //if theirs a message in the array
              $log.log('batchLog messages: ', messageQueue); //print the array
              console.log(messageQueue);
              //messageQueue = []; //then empty it
          } else {console.log('messageQueue is empty!');}
      }

      $interval(log, 1000); //every 2 seconds print and clear queue. (unelss its empty)
      //Note how the log() method is called without ()!!!

      return {
          logMessage: function(message) { //when the service is called with a message add it to the queue
            messageQueue.push(message);
          }
      };
  }])

  .factory('routeTemplateMonitor', ['$route', 'batchLog', '$rootScope', function($route, batchModule, $rootScope){
    return {
      routeMonitor: function() {
        $rootScope.$on('$routeChangeSuccess', function($route, batchLog, $rootScope){
          console.log('$route.current', $route.current);
          console.log('$route.current.template', $route.current.template);
          batchLog.logMessage($route.current ? $route.current.template : null);
        });
      }
    };
  }])

  .config(function($routeProvider, $locationProvider) {
      $routeProvider
          .when('/Book/:bookId', {
              controller: 'BookController',
              //templateUrl: 'book.html',
              template: 'controller: {{name}}<br />' +
                  'Book Id: {{params.bookId}}<br />',
              resolve: {
                  // I will cause a 1 second delay
                  delay: function($q, $timeout) {
                      var delay = $q.defer();
                      $timeout(delay.resolve, 1000);
                      return delay.promise;
                  }
              }
          })
          .when('/Book/:bookId/ch/:chapterId', {
              controller: 'ChapterController',
              //templateUrl: 'chapter.html',
              template: 'controller: {{name}}' +
                  '<br /> Book Id: {{params.bookId}}' +
                  '<br /> Chapter Id: {{params.chapterId}}'
          });

      // configure html5 to get links working on jsfiddle
      $locationProvider.html5Mode(true);
  });

＆＃13;

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Example - example-$route-service-production</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.30/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.30/angular-route.js"></script>
    <script src="script1.js"></script>
    <script type="text/javascript">
    angular.element(document.getElementsByTagName('head'))
           .append(angular.element('<base href="' + window.location.pathname + '" />'));
    </script>
</head>

<body ng-app="ngRouteExample">
    <div ng-controller="MainController">
        Choose:1.1
        <a href="Book/Moby">Moby</a> |
        <a href="Book/Moby/ch/1">Moby: Ch1</a> |
        <a href="Book/Gatsby">Gatsby</a> |
        <a href="Book/Gatsby/ch/4?key=value">Gatsby: Ch4</a> |
        <a href="Book/Scarlet">Scarlet Letter</a>
        <br/>
        <div ng-view></div>
        <hr />
        <pre>$location.path() = {{$location.path()}}</pre>
        <pre>$route.current = {{$route.current | json}}</pre>
        <pre>$route.current.template = {{$route.current.template}}</pre>
        <pre>$route.current.templateUrl = {{$route.current.templateUrl}}</pre>
        <pre>$route.current.params = {{$route.current.params}}</pre>
        <pre>$route.current.scope.name = {{$route.current.scope.name}}</pre>
        <pre>$routeParams = {{$routeParams}}</pre>
    </div>
</body>

</html>

＆＃13;

Answer 1

使用三个参数调用附加到$routeChangeSuccess事件的侦听器函数：event，currentRoute和previousRoute。

您无法像控制器功能那样将服务注入其中。

此外，注入控制器的$route对象与currentRoute和previousRoute对象看起来不一样。

如果要浏览console.log对象，请使用currentRoute：

.factory('routeTemplateMonitor', ['$route', 'batchLog', '$rootScope',
  function($route, batchLog, $rootScope) {
    return {
      routeMonitor: function() {
        $rootScope.$on('$routeChangeSuccess', function(event, currentRoute, previousRoute) {

          console.log(currentRoute);
        });
      }
    };
  }
])

演示： http://plnkr.co/edit/NeCpu4gQS3BxMAYKmqyA?p=preview

TypeError：无法读取属性＆＃39;模板＆＃39;未定义的

1 个答案: