[英]Angularjs controller in ng-include
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).
例如,我有projectsArchiveController可以“更正” api数据(第一行是标题,第二行是描述),或articleArchiveController(第一行是标题,第二行是摘录)。
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: 因此,在我的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"
}
];
So in my view I simply iterate over this object with an ng-repeat and include the archive template with the correct controller.. 因此,在我看来,我只是使用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>
Except it doesn't work, because Angular expects a controller function, and I'm providing a string. 除非它不起作用,因为Angular需要控制器函数,而我正在提供一个字符串。
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. 我读到某个地方我必须使用
projectsController.constructor
,所以我也尝试了一下,但是在那种情况下,它说它找不到“ itemsProvider”,尽管我以$ controller语法为他提供了项目。
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?
有什么帮助吗?
How about using a router like ui.router: 如何使用类似ui.router的路由器:
http://angular-ui.github.io/ui-router/site/#/api/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.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.