Angular-ui-Bootstrap tooltips nicht angezeigt in ng-repeat (node-webkit app)

Ich bin neu angular.js und node-webkit, und ich bin kämpfen, um bootstrap tooltips Arbeit in Inhalte, die dynamisch geladen werden per ng-repeat.

Erste, ich habe versucht mit standard-bootstrap und habe die folgenden :
http://jsfiddle.net/nsDFe/3/

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

Und dies funktioniert nicht (aber "normal" definiert tooltip in der ersten Zeile der Tabelle funktioniert).

Dann habe ich versucht, mit Hilfe des angular-ui-bootstrap und habe die folgenden (dachte, es sollte eine Art "Automatik", dass die Winkel-Bibliothek hören würde neue dom-Elemente) :
http://jsfiddle.net/XTG8k/2/

Aber kein Glück entweder. Könnte mir jemand zeigen in die richtige Richtung ? Ich habe einige Diskussionen zu diesem hier auf Stackoverflow, aber keine, die wirklich mein problem gelöst. Ich habe gehört, einige vage Referenzen auf $kompilieren konnte aber nicht herausfinden, wie man realisieren, dass.

InformationsquelleAutor beeb | 2014-03-30
  1. 7

    Ich glaube, Sie gehen gerade über dies der falsche Weg, Sie sollte nicht sein laden von html-in einen dynamisch geladenen Inhalten, sollten Sie nur die Daten zu laden, die Sie in Ihre html-Vorlage, und dann kannst du es so machen:

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

    <tr ng-repeat="foo in bar">
    <td><span tooltip="{{foo.tooltip}}">{{foo.content}}</span></td>
</tr>
    • danke, dass hilft für mein spezielles problem.
    InformationsquelleAutor dave
  2. 2

    Schrieb ich eine einfache Richtlinie, die für diese (mit Unterstützung der ng-repeat):

    Beispiel: Tooltips bootstrap angular Direktive

    Die Idee ist, rufen tooltip() mit den Allgemeinen Optionen auf jeder laden der "tooltip-loader" - element:

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

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

    };
  });

    Dann, Sie können es nennen, in den Blick: 

      <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>

    Und Beispiel für controller sein könnte:

    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'
      }
    ];

}]);
    InformationsquelleAutor Dudi
Schreibe einen Kommentar