2015-06-26 1 views
0

У меня есть система блога с проектами и статьями.Контроллер Angularjs в ng-include

Люди могут писать статьи и участвовать в их проектах.

Мое угловое приложение использует общий вид архива для отображения любого элемента, но использует пользовательский контроллер на основе того, какой элемент отображать. Например, у меня есть проектыArchiveController, который «исправляет» данные 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" 
      } 
     ]; 

Так, на мой взгляд, я просто итерацию по этому объекту с нг-повтора и включить шаблон архив с нужным контроллером ..

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

но он щурит иерархии области действия и события, правильно не уволили, так что я не знаю, что еще делать. Любая помощь?

+0

почему бы вам не сделать директиву, которая отображает содержимое? – enpenax

+0

Директива, которая включает весь шаблон? Ум, который мог бы работать, я больше сосредоточился на этом динамическом включении контроллеров, потому что я думал, что это будет проще и понятнее, чем директива. – XelharK

+0

Директивы являются удивительными и самодостаточными. у вас может даже быть параметр шаблона и заставить директиву динамически загружать шаблон, если он изменяет элемент списка. Я сделал это в недавнем проекте, и он работает как шарм :) – enpenax

ответ

0

Как об использовании маршрутизатора, как 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. 
+0

Ух, ты знаешь, что это неплохая идея. Я просто не хочу, чтобы URL-адрес изменился. – XelharK

Смежные вопросы