0

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

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

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

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

4

2 回答 2

2

从外部来源获取信息的机制需要提取到单独的服务中，并在需要时注入。
有用的链接
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);
}
于 2013-11-14T11:36:32.483 回答
0

是的，到目前为止，我在一个带有控制器的页面上完成了我所有的 AngularJS，我很困惑指令是否可以在没有声明控制器的页面上工作。答：他们肯定会，只要 ng-app 在那里运行。所以我在每个需要工具提示的页面的包装 div 中添加了工具提示，编写了一个名为 tooltip 的指令来确定哪个页面正在调用工具提示，并使用服务来加载数据。

HTML：

<div class="pagewrapper" tooltip data-title="unique-page-title">

JSON：

[{
    "extension": "unique-page-title",
    "contents": [
        {
            "head": "Tooltip heading one",
            "content": "information on section 1"
        },
        {
            "head": "Tooltip heading two",
            "content": "information on section 2"
        }
    ]
}]

JS：

angular.module('myApp.services', []).service('tooltips', function ($http) {
        var requestPromise = $http.get('path/to/tooltips.json').then(function (d) {
            return d.data;
        });
        this.getTooltips = function () {
            return requestPromise;
        };
});

angular.module('myApp.directives', []).directive('tooltip', function (tooltips, $filter) {
        return {
            restrict: 'A',
            link: function (scope, element, attr) {
                var elements = $('.forms .tooltip'),
                    list = [],
                    title = attr.title;

                //use the promisey service getTooltips to load the tooltips JSON
                tooltips.getTooltips().then(function (tips) {
                    //Do some things to identify the correct place to insert the tooltip content, and insert it.
                });
            }
        };
    });
于 2013-11-14T17:57:11.193 回答