javascript - 如何构造一个将在多个页面上使用的 AngularJS 函数？

Question

到目前为止，我的所有 AngularJS 都在一个页面上，并且在一个 Controller 内。现在我需要构建一种在所有 6 个页面上动态显示工具提示的方法 - 5 个页面当前没有 Controller ，1 个页面当前有“FoodCtrl”。我正在构建的函数将:从 tooltips.json 文件中读取，通过 id 找到该页面的正确工具提示，并将工具提示内容插入到 DOM 中。

myApp 已在所有这些页面上初始化。这是一个小而扁平的层次结构，如下所示:

--> Profile
--> Information
--> Test (has controller FoodCtrl)
--> Payment

我在这里寻求有关正确 Angular 实践的建议。我是否应该使用所需的工具提示行为扩展“FoodCtrl”，并将“FoodCtrl” Controller 添加到站点中的其他页面？或者，我应该为所有页面创建一个独特的“工具提示” Controller ，并以某种方式将其集成到已经具有“FoodCtrl”的页面上吗？或者，我应该设置一个通用的工具提示工厂/服务并从“FoodCtrl”以及其他页面上的新特定 Controller 引用它吗？

Answer 1

从外部源获取信息的机制需要提取到单独的服务中，并在需要时注入(inject)。
有用的链接
http://docs.angularjs.org/guide/dev_guide.services.creating_services
http://docs.angularjs.org/guide/dev_guide.services.injecting_controllers

服务使用示例

var app = angular.module('myApp', []);
app.service('tooltips', function() {
  this.getTooptip = function(pageId) {
      ...
  };
});

function myController($scope, tooltips) {
  $scope.pageId = '<pageID>'
    $scope.tooltip = tooltips.getTooltip($scope.pageId);
}