ng-include中的Angularjs控制器

Question

我有一個包含項目和文章的博客系統。

人們可以撰寫文章並在他們的項目中成為特色。

我的角度應用程序正在使用通用存檔視圖來顯示任何元素，但是它使用基於要顯示的元素的自定義控制器。 例如，我有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}
}

但它搞砸了作用域層次結構，並且事件未正確觸發，因此我不知道該怎么辦。 有什么幫助嗎？

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.