如何将 angularjs ui bootstrap 工具提示动态添加到现有标记中? [英] How to add angularjs ui bootstrap tooltips dynamically to existing markup?

问题描述

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

Relatively new to angularjs. Help me understand what's going on here!

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

What I'm ultimately trying to accomplish: Given a block of text in my html (say in a paragraph element), I want to dynamically add tooltips (bootstrap tooltips to be exact) to selected words in the text. So for example if a user types the world "hello" into a search box, all instances of "hello" in the paragraph will display a tooltip when hovered over, displaying some message like a definition or something.

注意:我不认为我最初对此很清楚，但是我想要添加工具提示的文本块已经在 html 中，并且不会有任何类型的指令标签标记它.请参阅我的 fiddle 以获取说明.

NOTE: I don't think I was clear on this initially, but the block of text to which I want to add the tooltip is already in the html, and will not have any kind of directive-tag mark-up surrounding it. See my fiddle for an illustration.

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

I've done this in jQuery...now I'm trying to get it to work in angularjs!

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

My first attempt was to use a custom filter with a regex which will insert an "a" tag with the tooltip attributes into the paragraph at the appropriate locations. The new markup shows up, but doesn't seem to be "seen" by angularjs (not quite sure of the terminology yet but I think it's not getting "bound"??).

这是jsfiddle上说明的问题:

Here's the problem on illustrated on jsfiddle:

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

(1) 输出中的第一行在foo"上有一个工作工具提示……它只是直接在标记中具有工具提示属性.生成的 html:

(1) The first line in the output has a working tooltip on "foo"...it just has the tooltip attributes directly in markup. Generated html:

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

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

(2) The second line uses ng-bind-html, and has the attributes, but not a working tooltip. Generated html:

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

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

(3) The third line uses the filter, and has the attributes, but not a working tooltip. Generated html:

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

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

My main question is...how to solve the task I described above?

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

Secondary question is about understanding what's going on in each of the 3 examples above. I noticed that the direct output in (1) has an "ng-scope" class inserted by angular in the generated markup. The other two lack this, but do have an ng-binding class inserted in the parent p tag. Not sure what's going on here but I think it has something to do with my problem.

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

I have a feeling the solution may involve a directive, but I'm not sure how I would apply that directive to existing text (i.e., a p tag already in the markup).

谢谢！

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

updated the jsfiddle to more accurately reflect the problem (fourth line in output)

推荐答案

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

The proper way to handle HTML would be angular directive, lets make a directive (say dynamic-tooltip) that takes two parameter

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

在HTML

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

searchElement 将与任何模型绑定，如

The searchElement will be bind with any model like

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

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

Here when you click search button, the value you typed in search box will be set in 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 如果找到，则创建工具提示.

The directive $watch tooltip-element, so when you change the value, first it try to remove previous tooltips then it try to match your search-word if found any then create the tooltip.

查看演示

这篇关于如何将 angularjs ui bootstrap 工具提示动态添加到现有标记中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！