2017-01-22 46 views
1

imは初心者です。私は、開発者ガイドから、私が学ぶのを助けるための例を試しています。これは私のコードです。 TypeError:未定義のプロパティ 'テンプレート'を読み取ることができません と私はtempaleが私の$ routeProviderのその部分でさえも定義されていないと言うことを理解しています。しかし、私は知識をどのようにこれを修正する必要はありません。誰かを助けることができる? eventcurrentRoutepreviousRoute$routeChangeSuccessイベントにアタッチTypeError:未定義のプロパティ 'template'を読み取ることができません

おかげ

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); 
 
    });
<!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>

+0

tasseAKATTを/受け入れ答え:) – tasseKATT

答えて

0

リスナー関数は3つの引数で呼び出されます。

コントローラ機能のようにサービスを挿入することはできません。

また、コントローラに注入される$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

+0

感謝をupvoteすることを忘れないでください –

+0

@ angularstar-あなたは歓迎です:) – tasseKATT