Binding angularJS Plugin jQuery qTip2

Sto cercando di capire come associare il contenuto di un tooltip con angolare. Ho una direttiva che assomiglia a questo:Binding angularJS Plugin jQuery qTip2

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

Esso utilizza il plugin qTip2 from here

mio index.html si presenta così (si ricorda che nel file effettivo che ho incluse tutte le fonti di testa, sto solo non incollandolo qui per evitare il disordine):

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

button.html

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

Come si può vedere nel codice direttiva. button.html viene caricato nel tooltip, tuttavia ciò impedisce il corretto funzionamento angolare. Il ng-click non funziona quando button.html viene caricato nel popup. Questo perché l'angolare non lo sa.

so anche che button.html è valido perché la semplice aggiunta di

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

a index.html funziona bene (cioè cliccando sul bottone esegue someFunction())

Quindi la mia domanda è:

Come si può associare il contenuto effettivo del suggerimento con angolare? Se non il contenuto, c'è un modo per legare il tooltip così angolare sa su di esso? Ho familiarità con $ scope. $ Apply() ma non sono abbastanza sicuro di come usarlo qui.

fonte

2013-07-29 Naveed

Hey ho aggiornato la mia risposta con un plunkr funzionante. Spero che ti aiuti ancora. Plunkr non funziona nel mio ufficio :-( –

UPDATE 1 Assicurati di andare da serpente caso camelCase quando si passa da HTML a JavaScript in angolare. Quindi init-toolbar in html si traduce in initToolbar in javascript.

Ecco un esempio di lavoro: http://plnkr.co/edit/l2AJmU?p=preview

HTML

<div init-toolbar=""> 
    <p> 
    Hover over me. Hover over me. Hover over me. 
    </p> 
</div>

Button.html

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

Javacript

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

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
    $scope.someFunction = function() { 
    $scope.name = 'FOO BAR'; 
    }; 
}); 

app.directive('initToolbar', function($http, $compile, $templateCache){ 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) 
     { 
      $http.get('button.html', {cache: $templateCache}). 
      success(function(content) { 
       var compiledContent = $compile(content)(scope); 

       $(element).qtip({ 
       content: compiledContent, 
       position: { 
        my: 'bottom left', 
        at: 'bottom middle', 
        target: $(element) 
       }, 
       hide: { 
        fixed : true, 
        delay : 1000 
       } 
      }); 

      }); 

     } 
    } 
});

ORIGINALE

Il motivo per cui il pulsante non funziona è perché l'angolare non sa che dovrebbe legarsi ad esso. Dici angolare di farlo usando $compile. Non so molto di questo pluggin qTip2, ma se si carica il modello, quindi lo compila $compile(template)(scope); e lo si consegna a qTip2, si otterranno i risultati che ci si aspetta.

fonte

2013-07-30 13:38:33

Se possibile, puoi dare un piccolo snippet di codice.Ho esaminato documenti angolari e chiamano sempre $ compilare su un modello definito nella direttiva. In questo caso mi riferisco a un jqueryObject (qTip) che non è necessariamente un modello e anche il contenuto interno punta a un url (button.html). Scusa, non sono abbastanza chiaro su $ compile e su come usarlo ancora. – Naveed

Sì, stavo cercando di fare un plunkr ma per qualche motivo è giù. Controllerò più tardi e cercherò di pubblicare qualcosa. –

Da quanto ho capito poiché qTip viene applicato all'elemento utilizzando jQuery, le modifiche all'oggetto qtip su runtime non verranno applicate. Ad esempio se abbiamo cambiato in: bottom middle => at: in alto a destra (passando un argomento alla direttiva forse) non avrà un effetto. – masimplo

Binding angularJS Plugin jQuery qTip2

risposta

Problemi correlati