angularjs 中具有动态路由的多个命名视图

Question

编辑： 这是 Plunker 处的完整代码。尽管我无法在执行中执行任何操作，但可以在本地使用相同的代码。然而给出了一个控制台错误

一切都很完美。但是由于 /news/:id/ 中的 :id，我在控制台中收到 jquery/angular 错误，这些错误无法在我的代码中的任何地方进行跟踪

我无法理解我做错了什么。

编辑：解决了 plunker https://plnkr.co/edit/FWcuBgGpVdMj3CroFrYJ

Answer 1

如果您需要根据关键字使用自定义模板，您可以执行以下操作：

.config(['$routeProvider', function($routeProvider, $routeParams) { $routeProvider .when('/news/:id/:keyWords', { template: '<div ng-include="url"></div>', controller: "exampleController" })

然后在 exampleController 中

function($routeParams, $scope) { $scope.url = $routeParams.keyWords; }

Answer 2

查看 ui router named views、

的文档

您可以使用以下语法来使用多个视图

$stateProvider
  .state('state',{
    url: '',
    views: {
      'header': {
        templateUrl: 'views/header.html',
        controller: 'headerCtrl'
      },
      'content': {
        template: '<div ui-view=" "></div>',  //<-- child templates loaded to here
      },
      'footer': {
        templateUrl: 'views/footer.html',
        controller: 'footerCtrl'
      }
    }
  })
  .state('state.post', {
    url: 'news/:id/:KeyWords'
    templateUrl: 'views/post.html'   //<-- This goes into content's ui-view
  });

我猜您想保留 header 和 footer 并更改 content 视图。

您可以通过将此州设为所有其他州的父州来实现此目的

假设

.state('main',{
  abstract: true,
  views: {
    'header': ... ,
    'content': {
       template: '<ui-view></ui-view>',
    }
    'footer': ...
  }
})

然后所有子视图都将在 , 例如：在 main.child 等中，您的模板将在内容的 <ui-view></ui-view> 标签

中加载

Answer 3

首先，您尝试使用 ui-router，但您在 plunker 中包含了 ngRoute 脚本。将其更改为

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>

那么一切都应该正常！

我建议你做一些改变...

1.使用 ui-sref 而不是 href 因为它更容易定义

ui-sref="post({id:1})" 变成 href="#/news/1"

如果你想改变 url 某天，那么你将不得不改变你的路由文件，而不是每个 href.

$stateProvider .state('post', { url: "news/:id"

或

$stateProvider .state('post', { url: "archive/:id"

或

$stateProvider .state('post', { url: "whatever/:id"

2。使用抽象状态

在您的示例中，最好定义包含页眉、内容和页脚的抽象状态 - 这是一个典型的用例。

ui-router Abstract States

An abstract state can have child states but can not get activated itself. An 'abstract' state is simply a state that can't be transitioned to. It is activated implicitly when one of its descendants are activated.

Some examples of how you might use an abstract state are:

To prepend a url to all child state urls. To insert a template with its own ui-view(s) that its child states will populate. Optionally assign a controller to the template. The controller must pair to a template. Additionally, inherit $scope objects down to children, just understand that this happens via the view hierarchy, not the state hierarchy. To provide resolved dependencies via resolve for use by child states. To provide inherited custom data via data for use by child states or an event listener. To run an onEnter or onExit function that may modify the application in someway. Any combination of the above. Remember: Abstract states still need their own for their children to plug into. So if you are using an abstract state just to prepend a url, set resolves/data, or run an onEnter/Exit function, then you'll additionally need to set template: "".

这里有一个 plunker 展示了我会怎么做。

https://plnkr.co/edit/5FvJaelyxdl5MuALt5VY?p=preview

希望对您有所帮助。

angularjs 中具有动态路由的多个命名视图

Multiple named views with dynamic routing in angularjs

angularjs

angularjs-routing

angular-ui-router