Question

我有一个包含项目和文章的博客系统。

人们可以写文章并在他们的项目中出现。

我的角度应用程序使用通用归档视图来显示任何元素，但它使用基于要显示的元素的自定义控制器。例如，我有projectsArchiveController，它可以纠正＆＃34; api数据（第一行是标题，第二行是描述），或者articleArchiveController（第一行是标题，第二行是摘录）。

一切正常。

现在，我正在尝试在人员资料视图中显示一系列标签中的元素。我想要一个项目的标签，一个用于文章等。（还有其他元素）。

所以在我的personProfileController中我创建了一个类似于数组的简单对象：

        [
            {
                title: 'Projects',
                slug: 'projects',
                items: vm.projects,
                controller: "ProjectsArchiveController"
            },{
                title: 'News',
                slug: 'news',
                items: vm.news,
                controller: "NewsArchiveController"
            },{
                title: 'Insights',
                slug: 'insights',
                items: vm.insights,
                controller: "InsightsArchiveController"
            }
        ];

所以在我看来，我只是用ng-repeat迭代这个对象，并用正确的控制器包含存档模板..

    <tabset>
        <tab ng-repeat="tab in vm.tabs" heading="{{ tab.title }}" active="tab.active">
            <div ng-controller="tab.controller" ng-include="'views/archive.html'">
            </div>
        </tab>
    </tabset>

除非它不起作用，因为Angular需要一个控制器功能，而且我提供了一个字符串。

所以我尝试了这个：

var projectsController = $controller('ProjectArchiveController', {$scope: $scope.$new(), items: vm.projects});

[{
    title: 'Projects',
    slug: 'projects',
    items: vm.projects,
    controller: projectsController
}, ...

但它也不起作用。我在某个地方读到了我必须使用projectsController.constructor，所以我也试过了，但在那种情况下，它说它无法找到＆＃34; itemsProvider＆＃34;尽管我正在喂食他是$ controller语法中的项目。

我写这篇文章是为了工作：

{
    title: 'Projects',
    slug: 'projects',
    items: vm.projects,
    controller: function(){return projectsController}
}

但它搞砸了范围层次结构并且事件没有被正确触发，所以我不知道还能做什么。有什么帮助吗？

Answer 1

如何使用像ui.router这样的路由器：

http://angular-ui.github.io/ui-router/site/#/api/ui.router

myApp.config(function($stateProvider) {
    $stateProvider
        .state('projects', {
            url: "/projects",
            templateUrl: "partials/projects.html"
            controller: 'ProjectsController'
        });   
}); //etc.

ng-include

1 个答案: