ng-repeat（node-webkit 应用程序）中未显示 Angular-ui Bootstrap 工具提示答案

【问题标题】：Angular-ui Bootstrap tooltips not showing in ng-repeat (node-webkit app)ng-repeat（node-webkit 应用程序）中未显示 Angular-ui Bootstrap 工具提示
【发布时间】：2019-03-04 18:40:29
【问题描述】：

我是 angular.js 和 node-webkit 的新手，我正在努力让引导工具提示在通过 ng-repeat 动态加载的内容中工作。

首先，我尝试使用标准引导程序并执行以下操作： http://jsfiddle.net/nsDFe/3/

app.directive('bsTooltip', function () {
    return function (scope, element, attrs) {
        // trying to register the new tooltips
        element.find('span').tooltip();
    };
});

这不起作用（但第一个表格行中“通常”定义的工具提示有效）。

然后我尝试使用 angular-ui 引导程序并执行以下操作（认为 angular 库会监听新的 dom 元素应该是一种“自动”）： http://jsfiddle.net/XTG8k/2/

但也没有运气。有人能指出我正确的方向吗？我在 Stackoverflow 上看到了一些关于此的讨论，但没有一个真正解决了我的问题。我听说过一些对 $compile 的模糊引用，但不知道如何实现它。

【问题讨论】：

标签： angularjs twitter-bootstrap tooltip angular-ui-bootstrap ng-repeat

【解决方案1】：

我认为您只是以错误的方式进行此操作，您不应该在动态加载的内容中加载 html，而应该只加载将放入 html 模板中的数据，然后您就可以做到像这样：

http://jsfiddle.net/XTG8k/5/

<tr ng-repeat="foo in bar">
    <td><span tooltip="{{foo.tooltip}}">{{foo.content}}</span></td>
</tr>

【讨论】：

【解决方案2】：

我为此写了一个简单的指令（支持 ng-repeat）：

示例：Tooltips bootstrap angular directive

这个想法是在每次加载“tooltip-loader”元素时使用通用选项调用 tooltip()：

angular.module('myApp', ['ui.bootstrap']).directive('tooltipLoader', function() {
    return function(scope, element, attrs) {

      element.tooltip({
        trigger:"hover",
        placement: "top",
        delay: {show: 1000, hide: 0}
      });

    };
  });

然后，你可以在视图中调用它：

  <div ng-repeat="_type in types" data-toggle="tooltip" data-original-title="{{_type.name}}" style="border: 1px solid blue; width: 50px;" tooltip-loader>
    {{_type.name}}
  </div>

  <div data-toggle="tooltip" data-original-title="Zoom reset" style="border: 1px solid blue; width: 100px;" tooltip-loader>
    <span>Zoom reset</span>
  </div>

控制器的例子可能是：

angular.module('myApp', ['ui.bootstrap']).controller('MainCtrl', ['$scope', function ($scope) {
    $scope.types = [{
        name: 'note',
        iconName: 'icon-text_tool_big'
      }, {
        name: 'rect',
        iconName: 'icon-square_tool_big'
      }, {
        name: 'circle',
        iconName: 'icon-ellipse_tool_big'
      }, {
        name: 'arrow',
        iconName: 'icon-arrow_tool'
      },{
        name: 'path',
        iconName: 'icon-free_line_tool'
      }
    ];

}]);

【讨论】：