简体繁体 English

Angularjs 在控制器之间共享方法

[英]Angularjs share methods between controller

原文 2013-07-03 16:20:49 2 2 javascript/ angularjs

I have an application that displays a news feed on one page (home page) and in another, it displays the feed for the user alone (user profile page).我有一个应用程序，它在一个页面（主页）上显示新闻提要，而在另一个页面上，它只显示用户的提要（用户个人资料页面）。

Both pages look and behave in the same way.两个页面的外观和行为都相同。 The change in content is due to different URLs called.内容的变化是由于调用的 URL 不同。

How to solve this in angularjs?如何在 angularjs 中解决这个问题？

I have a home controller that has all the methods/logic used to display the home page.我有一个家庭控制器，它具有用于显示主页的所有方法/逻辑。

Now I need to have one more controller that calls the other URL and does the same thing as a home controller.现在我需要再有一个控制器来调用另一个 URL 并执行与家庭控制器相同的操作。

I was thinking of something like the parent controller and two controllers.我在想像父控制器和两个控制器这样的东西。 But it looks like in angularjs controller inheritance is determined by the dom structure.但看起来在 angularjs 控制器继承是由 dom 结构决定的。 In my case, they are two different pages.就我而言，它们是两个不同的页面。 So I cant create a dom style inheritance.所以我无法创建 dom 样式继承。

I am confused on how to solve this without duplicating the code in both controllers.我对如何在不复制两个控制器中的代码的情况下解决此问题感到困惑。

I will be happy to add more details to this question if needed.如果需要，我很乐意为此问题添加更多详细信息。 I went through a number of google results but I couldn't figure out how to do this.我浏览了许多谷歌结果，但我不知道如何做到这一点。

2 个解决方案

A service (not a controller) should own the domain model, and provide a model API to the rest of the application (usually controllers) to use.服务（不是控制器）应该拥有域模型，并为应用程序的其余部分（通常是控制器）提供模型 API以供使用。

I suggest at least two services, one for your newsfeed, and one for your profile, and maybe one more for any shared functions (these functions can be passed a collection, or an individual post, as an argument).我建议至少使用两种服务，一种用于您的新闻源，一种用于您的个人资料，可能还有一种用于任何共享功能（这些功能可以作为参数传递给集合或单独的帖子）。 Inject the appropriate service(s) into each controller.将适当的服务注入每个控制器。

The "look" should be in an HTML template that you pull in using ng-view or ng-include. “外观”应该在您使用 ng-view 或 ng-include 引入的 HTML 模板中。 The template's ng-repeat will refer to a collection that is a $scope property that is a reference to the data stored in one of your services.模板的 ng-repeat 将引用一个集合，该集合是一个 $scope 属性，它是对存储在您的一项服务中的数据的引用。

For an example of a newsfeed service, and how a controller can get a reference to the data, see Should services expose their asynchronicity?有关新闻源服务的示例以及控制器如何获取对数据的引用，请参阅服务是否应该公开其异步性？

I wouldn't worry about repeating the code needed to use the $http service and return a promise in each service.我不会担心重复使用 $http 服务所需的代码并在每个服务中返回一个承诺。 Someday your profile page may start to look/behave differently than your newsfeed page.有一天，您的个人资料页面的外观/行为可能会与您的新闻源页面不同。

Pull your logic used to format and display into a utility angular service (app.factory).将用于格式化和显示的逻辑拉入实用程序角度服务 (app.factory)。 Then you can inject that into both controllers and share the logic that way.然后您可以将其注入到两个控制器中并以这种方式共享逻辑。