AngularJS Bindung jQuery qTip2 Plugin

Ich versuche herauszufinden, wie Sie den Inhalt eines Tooltip mit eckigen binden. Ich habe eine Richtlinie, die wie folgt aussieht:AngularJS Bindung jQuery qTip2 Plugin

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 nutzt die qTip2 Plugin from here

Meine index.html sieht wie folgt aus (bitte beachten Sie, dass in der eigentlichen Datei Ich habe alle Quellen in Kopf enthalten, ich einfügen es nur hier nicht 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 in der Richtlinie Code sehen können. button.html wird in den Tooltip geladen, dies verhindert jedoch, dass angular ordnungsgemäß funktioniert - Der ng-click funktioniert nicht, wenn button.html in das Popup geladen wird. Das kommt daher, dass angular nichts davon weiß.

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

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

zu index.html funktioniert das Hinzufügen (dh auf den Button führt Funktion())

Also meine Frage ist:

Wie kann ich den tatsächlichen Inhalt des Tooltip mit eckigen binden? Wenn nicht der Inhalt, gibt es eine Möglichkeit, den Tooltip so eckig zu binden? Ich bin vertraut mit $ scope. $ Apply(), aber ich bin mir nicht sicher, wie man es hier benutzt.

Quelle

2013-07-29 Naveed

Hey ich habe meine Antwort mit einem funktionierenden Plunkr aktualisiert. Hoffentlich hilft es dir noch. Plunkr funktioniert nicht in meinem Büro :-( –

UPDATE 1 Achten Sie darauf, von Snake-Case zu CamelCase zu gehen, wenn Sie von HTML zu Javascript in Angular gehen. So init-toolbar in html übersetzt in initToolbar in Javascript.

Hier ist eine Arbeitsprobe: 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 
       } 
      }); 

      }); 

     } 
    } 
});

ORIGINAL

Der Grund, warum die Schaltfläche nicht funktioniert, ist, weil angular nicht wissen, dass sie an sie gebunden werden soll. Sie sagen eckig, das mit $compile zu tun. Ich weiß nicht viel über dieses qTip2-Plugin, aber wenn Sie die Vorlage laden, dann kompilieren Sie es $compile(template)(scope); dann übergeben Sie es zu qTip2, erhalten Sie die Ergebnisse, die Sie erwarten.

Quelle

2013-07-30 13:38:33

Wenn möglich, kannst du vielleicht ein kleines Code-Snippet geben.Ich ging durch eckige Dokumente und sie rufen immer $ compile für eine Vorlage auf, die in der Direktive definiert ist. In diesem Fall beziehe ich mich auf ein jqueryObject (qTip), das nicht notwendigerweise eine Vorlage ist, und der innere Inhalt verweist auf eine URL (button.html). Tut mir leid, ich bin nicht ganz klar über $ kompilieren und wie man es noch benutzt. – Naveed

Ja, ich habe versucht, einen Plunkr zu machen, aber aus irgendeinem Grund ist es nicht gut. Ich werde später überprüfen und versuchen, etwas zu posten. –

Von dem, was ich verstehe, da qTip mit jQuery auf das Element angewendet wird, werden Änderungen am qtip-Objekt zur Laufzeit nicht übernommen. Zum Beispiel, wenn wir geändert haben: unten Mitte => oben rechts oben (durch Übergabe eines Arguments an die Direktive vielleicht) wird keine Wirkung haben. – masimplo

AngularJS Bindung jQuery qTip2 Plugin

Antwort

Verwandte Themen