Angularjs控制器包括

Angularjs controller in ng-include

本文关键字：包括 控制器 Angularjs      更新时间：2023-09-26

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

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

我的angular应用程序使用一个通用的归档视图来显示任何元素，但它使用了一个基于显示哪个元素的自定义控制器。例如，我有projectsArchiveController，它"更正"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，所以我也尝试过，但在这种情况下，它说找不到"itemsProvider"，尽管我正在用$controller语法向他提供项目。

我写了这样的文章：

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

但它破坏了作用域层次结构，事件也没有正确启动，所以我不知道还能做什么。有什么帮助吗？

使用像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.
相关文章：