Angularjs controller in ng-include

Question

I have a blog system with projects and articles.

People can write articles and be featured in their projects.

My angular application is using a generic archive view to display any element, but it uses a custom controller based on which element to display. For example, I have the projectsArchiveController which "corrects" the api data (first line is title, second line is description), or the articleArchiveController (first line is title, second line is excerpt).

Everything works fine.

Now I am trying to display the elements in a series of tabs, for the person profile view. I want a tab for the projects, one for the articles, etc.. (there are other elements).

So in my personProfileController I created a simple array-like object:

        [
            {
                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"
            }
        ];

So in my view I simply iterate over this object with an ng-repeat and include the archive template with the correct controller..

    <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>

Except it doesn't work, because Angular expects a controller function, and I'm providing a string.

So I tried this:

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

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

But it doesn't work either. I read somewhere that I must use projectsController.constructor , so I tried that as well, but in that case it says that it cannot find the "itemsProvider", despite the fact that I'm feeding him the items in the $controller syntax.

I got it to work by writing this:

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

but it screws up the scope hierarchy and the events are not fired correctly, so I don't know what else to do. Any help?

Answer 1

How about using a router like 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.