AngularJS Binding jQuery qTip2 Plugin

Question

Jul 29, 2013, 11:14 PM

angularjs-scope qtip2 angularjs angularjs-directive

AngularJS Binding jQuery qTip2 Plugin

Ich versuche herauszufinden, wie man den Inhalt eines Tooltips mit Angular verknüpft. Ich habe eine Anweisung, die so aussieht:

script.js

var myApp = angular.module('myApp', []);

myApp.directive('initToolbar', function(){
    return {
        restrict: 'A',
        link: function(scope, element, attrs)
        {
            $(element).qtip({
                content: {
                    ajax:
                    {
                        url: 'button.html'
                    }
                },
                position: {
                    my: 'bottom left',
                    at: 'bottom middle',
                    target: $(element)
                },
                hide: {
                    fixed : true,
                    delay : 1000
                }
            });
        }
    }
});

Es verwendet das qTip2-Pluginvon hier

Meine index.html sieht wie folgt aus (bitte beachten Sie, dass ich in der aktuellen Datei, in der ich alle Quellen in head aufgenommen habe, sie nur nicht hier einfüge, um Unordnung zu vermeiden):

<body>
    <div initToolbar>
        <p>
            Hover over me. Hover over me. Hover over me.
        </p>
    </div>
</body>

und

button.html

<div ng-controller="myController">
    <button ng-click="someFunction()">Click me</button>
</div>

Wie Sie im Anweisungscode sehen können. button.html wird in die QuickInfo geladen, dies verhindert jedoch, dass Angular ordnungsgemäß funktioniert. Der NG-Klick funktioniert nicht, wenn button.html in das Popup geladen wird. Das liegt daran, dass Angular nichts davon weiß.

Ich weiß auch, dass button.html gültig ist, weil einfach hinzufügen

<ng-include src="'button.html'">

zu index.html funktioniert einwandfrei (d. h. durch Klicken auf die Schaltfläche wird someFunction () ausgeführt)

Meine Frage lautet also:

Wie kann ich den eigentlichen Inhalt des Tooltips mit Angular binden? Wenn nicht der Inhalt, gibt es eine Möglichkeit, den Tooltip so zu binden, dass Angular davon weiß? Ich kenne $ scope. $ Apply (), bin mir aber nicht ganz sicher, wie ich es hier verwenden soll.