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

Question

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

我最终要完成的任务:给定我的html中的一个文本块(比如在一个段落元素中),我想动态地将文本中的选定单词工具提示(准确地说是自举工具提示)添加.因此,例如,如果用户在搜索框中键入世界"hello",则段落中的所有"hello"实例将在悬停时显示工具提示,显示某些消息,如定义或其他内容.

注意:我不认为我最初对此有所了解,但是我要添加工具提示的文本块已经在html中,并且不会有任何类型的指令标记标记.看看我的小提琴插图.

我在jQuery中完成了这个...现在我想让它在angularjs中工作!

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

这是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)中的直接输出在生成的标记中有角度插入的"ng-scope"类.另外两个缺少这个,但确实在父p标签中插入了ng-binding类.不确定这里发生了什么,但我认为这与我的问题有关.

我有一种感觉,解决方案可能涉及指令,但我不确定如何将该指令应用于现有文本(即标记中已有的ap标记).

谢谢!

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

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会与任何型号的等结合

  <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-wordif,然后创建工具提示.

检查 Demo