Question

在我正在开发的项目上，我们创建了一些SVG地图。我们有一个系统，我们可以从我们的数据库中获取有关地图上特定位置的信息。我正在努力在单击关联的多边形时显示UI Bootstrap工具提示。但是，我发现有两种方法无效。

第一种方法不起作用的方法是简单地在overarching元素上设置一个指令，但是设置一个系统来绑定指令的link函数中的元素，如下所示：

(function () {
    'use strict';

    angular.module('app').directive('locationMap', [directive]);

    function directive() {
        return {
            restrict: 'A',
            scope: {
                vm: '='
            },
            link: function(scope, elem) {
                var polygons = elem.find('polygon');
                angular.forEach(polygons, function(current) {
                    var currentElement = angular.element(current);
                    var id = currentElement.attr('id');

                    // This function in the VM actually looks up
                    // the given ID, and generates some useful details.
                    // The implementation is unimportant for the question.
                    var formattedText = scope.vm.buildDetails(id);

                    currentElement.attr('tooltip', formattedText);
                    currentElement.attr('tooltip-trigger', 'click');
                    // You have to have this to get this to work with SVG.
                    currentElement.attr('tooltip-append-to-body', true);
                });
            }
        }
    }
})();

虽然此代码生成有效标记，但单击SVG多边形实际上并不执行任何操作。进一步的研究表明，这是因为Angular在compile时间设置了事件和内容。

所以，接下来我试图实现一个编译函数......

compile: function(elem, attrs) {
    // Same contents as the link function above.
}

...但这不起作用，因为compile无法访问范围;您必须等到link才能访问范围。

但是，如果我不在编译时这样做，我就死在了水中。

问题：我可以通过什么方式在点击时进行交互的SVG上设置UI Bootstrap工具提示，但是当前范围内的详细文本是什么？我有一种感觉，我忽略了一些非常简单的东西。

Answer 1

当我拥有link功能时，我就在那里。我需要做的是包含$compile服务，并在我的angular.forEach循环中使用它...

(function () {
    'use strict';

    angular.module('app').directive('locationMap', ['$compile', directive]);

    function directive($compile) {
        return {
            restrict: 'A',
            link: function(scope, elem) {
                var polygons = elem.find('polygon');
                angular.forEach(polygons, function(current) {
                    var currentElement = angular.element(current);
                    var id = currentElement.attr('id');

                    currentElement.attr('tooltip', '{{ vm.buildDetails(' + id + ') }}');
                    currentElement.attr('tooltip-trigger', 'click');
                    currentElement.attr('tooltip-append-to-body', true);

                    $compile(currentElement)(scope);
                });                
            }
        }
    }
})();

我做到了，我的工具提示事件正在顺利进行。

如何追溯性地将UI Bootstrap Tooltip添加到某些SVG元素？

1 个答案: