javascript - 如何将 angularjs ui bootstrap 工具提示动态添加到现有标记？

Question

angularjs 相对较新。帮助我了解这里发生了什么!

我最终想要完成的事情:给定我的 html 中的一段文本(比如在段落元素中)，我想动态地向文本中的选定单词添加工具提示(确切地说是引导工具提示)。因此，例如，如果用户在搜索框中键入世界“你好”，则该段落中所有“你好”的实例将在鼠标悬停时显示工具提示，显示一些消息，如定义或其他内容。

注意:我不认为我最初对此很清楚，但我想添加工具提示的文本 block 已经在 html 中，并且周围不会有任何类型的指令标记标记它。看我的fiddle一个例子。

我已经在 jQuery 中完成了这个...现在我正试图让它在 angularjs 中工作!

我的第一次尝试是使用带有正则表达式的自定义过滤器，它将带有工具提示属性的“a”标签插入到段落的适当位置。新标记出现了，但似乎没有被 angularjs“看到”(还不太确定术语，但我认为它没有被“绑定(bind)”？？)。

这是 jsfiddle 上说明的问题:

http://jsfiddle.net/petersg5/pF33a/2/

(1) 输出中的第一行有一个关于“foo”的有效工具提示……它只是直接在标记中具有工具提示属性。生成的 html:

<a href="#" tooltip-placement="top" tooltip="basic tooltip" class="ng-scope">foo</a>

(2) 第二行使用 ng-bind-html，并具有属性，但不是工作工具提示。生成的 html:

<a href="#" tooltip-placement="top" tooltip="tooltip via ng-bind-html">foo</a>

(3) 第三行使用过滤器，并且有属性，但不是工作工具提示。生成的 html:

<a href="#" tooltip-placement="top" tooltip="tooltip via filter">foo</a>

我的主要问题是......如何解决我上面描述的任务？

第二个问题是关于理解上述 3 个示例中的每一个示例的情况。我注意到 (1) 中的直接输出在生成的标记中有一个由 angular 插入的“ng-scope”类。其他两个没有这个，但是在父 p 标签中插入了一个 ng-binding 类。不确定这里发生了什么，但我认为这与我的问题有关。

我觉得解决方案可能涉及指令，但我不确定如何将该指令应用于现有文本(即标记中已有的 p 标记)。

谢谢!

编辑:更新了 jsfiddle 以更准确地反射(reflect)问题(输出的第四行)

Answer 1

处理 HTML 的正确方法是 angular 指令，让我们创建一个带有两个参数的指令(比如 dynamic-tooltip)

• 工具提示信息
• 您的搜索词

在 HTML 中

  <p dynamic-tooltip="my message" tooltip-element="searchElement">
    Hello World check out my foo bar app
  </p>

searchElement 将与任何模型绑定(bind)，例如

  <input type="search" ng-model="search">
  <input type="button" value="Search" ng-click="searchElement = search">

这里当你点击search按钮时，你在搜索框中输入的值将被设置到searchElement

指令定义为:

app.directive('dynamicTooltip', function($compile) {
    return {
      restrict: 'A',
      scope: {
        tooltipElement: '=',
        dynamicTooltip: '@'
      },
      link: function(scope, element, attrs) {
        var template = '<a href="#" tooltip-placement="top" tooltip="' + scope.dynamicTooltip + '">{{tooltipElement}}</a>';
        scope.$watch('tooltipElement', function(value) {
          var previousTooltip = element.find('a');
          angular.forEach(previousTooltip, function(item, i) {
            var el = angular.element(item);
            el.replaceWith(el.text());
          });
          var searchText = scope.tooltipElement;
          if (searchText) {
            replaced = element.html().replace(new RegExp(searchText, "g"), template);
            element.html(replaced);
          }
          $compile(element.contents())(scope);
        });
      }
    }
  })

指令 $watch tooltip-element，因此当您更改值时，它首先尝试删除以前的工具提示，然后尝试匹配您的 search- word 如果找到则创建工具提示。

检查 Demo