routeParams无法正常工作

时间:2016-03-16 04:22:44

标签: angularjs ngroute

我有基本的路由工作,但是当我尝试在我的路由中包含params时,我的ngview中没有任何渲染

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

myApp.config(function($routeProvider) {

    $routeProvider

    .when('/', {
        templateUrl: 'pages/main.html',
        controller: 'mainController'
    })

    .when('/second/:num', {
        templateUrl: 'pages/second.html',
        controller: 'mainController'
    })

});

myApp.controller('mainController',
    ['$scope', '$log', '$routeParams', function($scope, $log, $routeParams) {
    $scope.name = "Chris";
    alert($routeParams);
    $scope.num = $routeParams.num;
    $log.info($scope.num)
}]);

所以,当我尝试访问/ second /:num时,我的ngview中没有渲染。但如果我做/或/秒,这些页面正常工作

2 个答案:

答案 0 :(得分:0)

嘿,请你在second.html页面检查控制器是否添加控制器,我建议每个模板使用不同的控制器。

最好的方法是使用stateProvider比routeProvider简单灵活,两者都相同但是stateProvider更方便。

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

myApp.config(function($stateProvider) {

  $stateProvider
    .state('/', {
    templateUrl: 'pages/main.html',
    controller: 'mainController'
  })

  .state('/second/:num', {
    templateUrl: 'pages/second.html',
    controller: 'mainController'
  })

});
myApp.controller('mainController', ['$scope', '$log', '$stateParams', function($scope, $log, $stateParams) {
  $scope.name = "Chris";
  alert($stateParams);
  $scope.num = $stateParams.num;
  $log.info($scope.num)
}]);

答案 1 :(得分:0)

在声明模板路径或控制台中出现某种错误的方式中必定存在某些内容。下面是代码的复制品,ng-templates中的html文件:

enter code here

time.setenable(false);
var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function($routeProvider) {

  $routeProvider

  .when('/', {
    templateUrl: 'main.html',
    controller: 'mainController'
  })

  .when('/second/:num', {
    templateUrl: 'second.html',
    controller: 'mainController'
  })

});
myApp.controller('mainController', ['$scope', '$location', '$log', '$route', '$routeParams', function($scope, $location, $log, $route, $routeParams) {
  $scope.name = "Chris";
  $scope.num = $routeParams.num || 'not defined';
  console.log($scope.num);
  
  $scope.goTo = function(number) {
    $location.path('/second/' + number);
  };
  $scope.route = $route.current;
  $scope.goHome = function(number) {
    $location.path('/');
  };
}]);

你有什么事吗?