4

角度是否支持动态路由？也许像这样的一些技巧：

$routeProvider.when('/:ctrl/:action', 
                     getRoute($routeParams.ctrl,$routeParams.action))

function getRoute(ctrl, action){
   return {
      templateUrl: ctrl+"-"+action+".html"
      controller: 'myCtrl'
   }
}

请帮助我，我需要根据 routeParams 获取 templateUrl

4

2 回答 2

7

这是一个较晚的答案，但我自己也遇到了这个问题，但事实证明 Dan 的解决方案与 ngView 指令上的 ngAnimate 类冲突，并且显示了视图，但将立即应用 ng-leave 动画并隐藏视图用他的动态路由打开。

我在这里找到了完美的解决方案，它在 1.1.5 + 中可用

在 中$routeProvider，templateUrl值可以是一个函数，并传递给路由参数：

app.config(function ($routeProvider) {
$routeProvider
    .when('/:page', {
         templateUrl: function(routeParams){
             return '/partials/'+routeParams.page+'.html';
        }
    })
});

虽然控制器不能作为一个函数给出，所以我的解决方案是像往常一样在模板 html 中使用ng-controller="HomeCtrl".

使用这个解决方案，我们可以在 Angular 中按照约定进行路由。我希望这可以帮助那些不热衷于手动将每条路由添加到 routeProvider 的其他人。

于 2014-02-24T20:05:59.827 回答
3

您想将其降低到控制器级别。

在此示例中，我将按子域覆盖整个页面以及部分页面：

应用程序.js

config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $locationProvider.html5Mode(true);
  $routeProvider.when('/', {
    template: 'home'
  });
  $routeProvider.when('/contact', {
    template: 'contact'
  });
  $routeProvider.otherwise({redirectTo: '/'});
}])

控制器.js

controller('AppController', ['$scope','Views', function($scope, Views) {    
  $scope.$on("$routeChangeSuccess",function( $currentRoute, $previousRoute ){
    $scope.page = Views.returnView();
  });

  $scope.returnView = function(partial){
    return Views.returnView(partial);
  }    

}])

服务.js

factory('Views', function($location,$route,$routeParams,objExistsFilter) {  

  var viewsService = {};
  var views = {
    subdomain1:{
      'home':'/views/subdomain1/home.html'
    },
    subdomain2:{

    },
    'global.header':'/views/global.header.html',
    'global.footer':'/views/global.footer.html',
    'home':'/views/home.html',
    'home.carousel':'/views/home.carousel.html',
    'contact':'/views/contact.html',
  };

  viewsService.returnView = function(partial) {
    var y = (typeof partial === 'undefined')?$route.current.template:partial;
    var x = $location.host().split(".");
    return (x.length>2)?(objExistsFilter(views[x[0]][y]))?views[x[0]][y]:views[y]:views[y];
  };

  viewsService.returnViews = function() {
  return views;
  };

  return viewsService;
}).

过滤器.js

filter('objExists', function () {
  return function (property) {
    try {
      return property;
    } catch (err) {
      return null
    }
  };
});

索引.html

<!doctype html>
<html lang="en" ng-controller="AppController">
<body>
<ng-include src="returnView('global.header')"></ng-include>
<ng-include src="page"></ng-include>
<ng-include src="returnView('global.footer')"></ng-include>
</body>
</html>
于 2013-06-17T19:09:39.250 回答