Question

我正在开发 meanjs 项目。我有自己的家庭观点，我会在几个ui-view中分裂

<div ui-view="section1"></div>
<div ui-view="section2"></div>
<div ui-view="section3"></div>

每个 ui-view 必须托管相应的CRUD模块视图。

例如，如果“section1”ui-view 与模块“文章”相关联，我会认为“section1”ui-view包含“ list-articles.client.view.html“，但是当我点击此列表视图中的”创建新文章“时，我希望”create-article.client.view.html“< / strong>出现在“section1”ui-view中。

编辑：我有几个CRUD模块（一个用于文章，一个用于快速新闻等...），我希望每个模块都有自己的独特页面部分。

我认为使用 angularjs ui-router 是可能的，但我不知道该怎么做。非常感谢你的帮助。

编辑2：

我尝试过汤姆提出的解决方案，我当然做得不好。

在 /modules/core/client/views/home.client.view.html 中，我有一个像这样的ng-include：

<div ng-include="'/modules/articles/client/views/list-articles.client.view.html'"></div>

在 /modules/core/client/config/core.client.routes.js 中，我添加了这个：

.state('articles.create', { url: '/articles/add', templateUrl: 'modules/articles/client/views/create-article.client.view.html' });

（控制器位于文章模块中并在视图中定义）

在 /modules/articles/client/views/list-articles.client.view.html 中，创建页面的链接定义如下：

<a Href="#/articles/add">create one</a>

顺便说一下＃/ articles / add 在地址栏中没有很好地显示，我就像 /＃％2F / articles / add

但是创建页面没有加载到“ng-include”部分，而是取代主页（我将它作为局部视图）。

我做错了什么？感谢

Answer 1

对于这种情况，只有一个ui-view就足够了。您可以使用ui-route插件，然后使用一个<div ui-view>元素。

在AngularJS配置中的路径定义中，您可以执行以下操作：

angular.module('app', [
        'ui.router'
    ]).config(config);


    function config($stateProvider) {

        //$urlRouterProvider.otherwise('/');

        $stateProvider.state('default', {

            url: '',
            templateUrl: '/list.html',
            controller: ListController,
            controllerAs: 'vm'

        }).state('list', {

            url: '/',
            templateUrl: '/list.html',
            controller: ListController,
            controllerAs: 'vm'

        }).state('edit', {

            url: '/edit/:id',
            templateUrl: '/edit.html',
            controller: EditController,
            controllerAs: 'vm'

        }).state('add', {

            url: '/add',
            templateUrl: '/add.html',
            controller: AddController,
            controllerAs: 'vm'

        });

    }

另外，不要忘记在应用内定义控制器。

在你的html中，如果你把这个类型链接放在其中：

<a href="#/edit/23">Edit</a>
<a href="#/add">Add</a>

点击它们会自动加载您的edit.html或add.html。

原因是您可以在编辑中访问ID，如下所示：

function EditController($scope, $stateParams) {

  var id = $stateParams.id;
}

如果您要在同一页面中使用多个视图，我建议您使用ng-include，例如在list.html中，您可以拥有：

<div ng-include src="'/section1.html'"></div>
<div ng-include src="'/section2.html'"></div>
...

并在一个Config文件中定义所有路由器，但在每个sectionNN.html中，您可以使用不同的视图。

与CRUD模块关联的多个命名视图

1 个答案: