Question

我正在调查我是否可以拥有标题所说的内容。这是我的想法。

让我们假设我有这条路线：

  .when('/', {
        templateUrl : 'partials/homepage.html',
  })

  .when('/test', {
        templateUrl : 'partials/test.html',
  })

  .when('/page/:pageID', {
        templateUrl : 'partials/page.html',
  })

  .when('/page/single/:pageID', {
        templateUrl : 'partials/page-single.html',
  })

到目前为止，我有机会添加templateUrl以及路径中的控制器详细信息，一切正常。

现在应用程序已更改，只有一个控制器包含所需的所有信息，并且必须保留一个控制器。路线将是这样的：

  .when('/:templateName/:pageID', {
       controller: 'myCtrl'
  })

我可以通过获取templateName参数从控制器设置模板ID吗？如果是这样，最后一个路由示例/ page / single /：pageID怎么样？我怎么知道路线上有第二个选择？

我可以使用templateName参数并使用$ routeChangeSuccess方法查看它，但我找不到任何方法来动态设置模板。

有什么想法吗？

Answer 1

一种解决方案可能是以下一种：

angular.module('myapp', []).
            config(['$routeProvider', function($routeProvider) {
            $routeProvider.when('/:templateName/:pageId', {
                templateUrl: function(urlattr){
                    return '/pages/' + urlattr.templateName + '.html';
                },
                controller: 'YourCtrl'
            });
        }
    ]);

来自AngularJs 1.3文档：

templateUrl - {string | function()} - 返回应由ngView使用的html模板路径的路径或函数。

如果templateUrl是一个函数，它将使用以下参数调用：   Array.<Object> - 通过应用当前路由
从当前$location.path()提取的路由参数

Answer 2

我会将您的singleton逻辑从您的控制器移动到服务。由于您未提供以下代码，因此可以通过示例了解其工作原理。

＆＃13;

app.config(function($routeProvider) {
  
  $routeProvider
    .when('/', {
      templateUrl: 'partials/homepage.html',
      controller: 'SingleController'
    })
    .when('/test', {
      templateUrl: 'partials/test.html',
      controller: 'SingleController'
    })
    .when('/page/:pageId', {
      templateUrl: 'partials/page.html',
      controller: 'SingleController'
    });
  
});

app.provider('appState', function() {
  
  this.$get = [function() {
    return {
      data: {}
    };
  }];

});

app.controller('SingleController', function ($scope, appState) {
  
  $scope.data = appState.data;
  
});

＆＃13;

但是如果它必须是一个单独的控制器，你实际上可以在ng-controller指令之前使用ng-view指令，这样它就成为所有视图的$rootScope范围。之后，只需在$ routeProvider中为控制器添加空函数包装器。

AngularJS，具有不同模板但具有相同控制器的多个路由怎么样？

2 个答案: