在angularjs中使用动态路由的多个命名视图

编辑：以下是Plunker的完整代码。尽管我不能执行任何代码，但是在本地执行相同的代码。但是，如果出现控制台错误在angularjs中使用动态路由的多个命名视图

这一切都很完美。但由于:id在/news/:id/，我越来越jquery /角度错误控制台中无法跟踪我的代码中的任何地方

我不能c我做错了什么。

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

来源

2016-07-19 Rashid Javed

您想要实现什么？你能创造蹲伏吗？ – krutkowski86

@irhabi .. Plunker就在那里。成就是偏离最低程度的运行应用程序错误;结构体。新闻/ ID的标题和动态值 – Sami

首先，您正在尝试使用ui-router，但是您的代码中包含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"

如果你想更改网址有一天，那么你将不得不改变你的路线文件，而不是每个href。

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

或

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

或

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

2.使用抽象状态

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

UI路由器 抽象状态

一种抽象状态可以有子状态，但不能得到激活本身。 “抽象”状态只是一个不能被过渡到的状态。当其中一个后代被激活时，它被隐式激活。

的如何使用抽象的状态是一些例子：

要前置一个URL到所有子状态的URL。要插入一个模板，并且其子视图将填充其自己的ui-view。可选将控制器分配给模板。控制器必须与模板配对。此外，继承$ scope对象到儿童，只要明白，这是通过视图层次结构，而不是状态层次结构。通过解析提供已解决的依赖关系，供子状态使用。通过数据提供继承的自定义数据以供子状态或事件侦听器使用。运行onEnter或onExit 函数，可以在某种程度上修改应用程序。上述任何组合。请记住：抽象国家仍然需要自己的为他们的孩子插入。因此，如果您仅使用抽象状态来预先设置url，设置resolves/data或运行输入/退出函数，那么您还需要设置模板： “”。

这是一个plunker，它显示了我将如何去做。

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

希望它能帮助。

来源

2016-07-21 21:39:47 krutkowski86

如果需要使用自定义的模板依赖于关键字，你可以做到以下几点：

.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; }

来源

2016-07-19 12:24:26 jacopobeschi

这不是一个好方法。 – krutkowski86

我想使用状态 –

查看的文档，

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

$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>标记

来源

2016-07-19 12:34:04 Vamsi

我已经在使用这个 –

检查语法正确，你正在使用'val'键。它适合哪里？ – Vamsi

我编辑了代码opease chek它 –

在angularjs中使用动态路由的多个命名视图

回答

相关问题