AngularJS binding jQuery qTip2 plugin

Question

Jul 29, 2013, 11:14 PM

angularjs-scope qtip2 angularjs angularjs-directive

AngularJS binding jQuery qTip2 plugin

Próbuję dowiedzieć się, jak powiązać zawartość podpowiedzi z kanciastą. Mam dyrektywę, która wygląda tak:

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
                }
            });
        }
    }
});

Używa wtyczki qTip2stąd

Mój index.html wygląda tak (proszę zauważyć, że w rzeczywistym pliku umieściłem wszystkie źródła w głowie, po prostu nie wklejam go tutaj, aby uniknąć bałaganu):

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

i

button.html

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

Jak widać w kodzie dyrektywy. button.html jest ładowany do podpowiedzi, jednak zapobiega to poprawnemu funkcjonowaniu kątowego - ng-click nie działa, gdy przycisk.html jest ładowany do wyskakującego okienka. To dlatego, że kanciasty nie wie o tym.

Wiem też, że button.html jest ważny, ponieważ po prostu dodaje

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

do index.html działa dobrze (tzn. kliknięcie przycisku powoduje wykonanie someFunction ())

Więc moje pytanie brzmi:

Jak mogę powiązać rzeczywistą zawartość podpowiedzi z kanciastą? Jeśli nie treść, to czy istnieje sposób na powiązanie podpowiedzi w taki sposób, że jest o niej przekonany? Jestem zaznajomiony z $ scope. $ Apply (), ale nie jestem pewien, jak go użyć tutaj.