AngularJS ciltleme jQuery qTip2 eklentisi

Bir araç ipucunun içeriğini açısal olarak nasıl bağlayacağımı anlamaya çalışıyorum. Şöyle bir direktif var:AngularJS ciltleme jQuery qTip2 eklentisi

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

Elimdeki gerçek dosyasında lütfen unutmayın (from here

Benim index.html şöyle qTip2 eklentisi kullanan beyninin içindeki tüm kaynaklar dahil, sadece) yığılmayı önlemek için buraya yapıştırarak değilim:

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

Eğer yönerge kodu da görebileceğiniz gibi

. button.html, araç çubuğuna yüklenir, ancak bu, açısal işlevlerin düzgün çalışmasını engeller - button.html, açılır pencereye yüklendiğinde ng tıklama çalışmaz. Çünkü açısal, bunun hakkında bilmiyor. basitçe index.html'ye

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

çalışıyor ekleyerek çünkü ben de o button.html biliyoruz

geçerlidir

Yani benim sorum (yani butonuna tıklayarak birFonksiyon() çalıştırır):

Araç ipucunun asıl içeriğini açısal olarak nasıl bağlarım? İçerik değilse, araç ipucunu bu şekilde açacak şekilde bağlamak için bir yol var mı? $ kapsamına aşinayım. $ Apply() ancak burada nasıl kullanılacağını tam olarak bilmiyorum.

kaynak

2013-07-29 Naveed

Hey Cevabımı çalışan bir plunkr ile güncelledim. Umarım hala yardımcı olur. Plunkr benim ofisimde çalışmıyor :-( –

GÜNCELLEME 1 açısal içinde javascript HTML geçerken CamelCase için yılan davadan gitmek emin olun. Yani html içinde init-toolbar javascript içinde initToolbar çevirir. İşte

bir çalışma örneğidir: 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

Düğmenin çalışmıyor olmasının nedeni, açısal açının kendisine bağlanması gerektiğini bilmemesidir. Bunu $compile kullanarak yapmak için açısal olarak anlatırsınız. Bu qTip2 pluggin hakkında fazla bir şey bilmiyorum, ancak şablonu yüklerseniz, $compile(template)(scope);'u derleyin ve daha sonra qTip2'ye aktarın, beklediğiniz sonuçları elde edersiniz.

kaynak

2013-07-30 13:38:33

Mümkünse küçük bir kod snippet'i verebilirsiniz.Açısal dokümanlar üzerinden geçtim ve her zaman yönergede tanımlanan bir şablona derleme derlerler. Bu durumda, bir şablon olması gerekmeyen bir jqueryObject (qTip) ve iç içeriğin bir URL'ye (button.html) işaret ettiğini belirtmek isterim. Üzgünüm, $ compile'da ve henüz nasıl kullanılacağı konusunda net değilim. – Naveed

Evet Bir plunkr yapmaya çalışıyordum ama bir sebepten dolayı. Daha sonra kontrol edip bir şeyler göndermeyi deneyeceğim. –

qTip öğesinin jQuery kullanılarak öğeye uygulandığından beri, çalışma zamanında qtip nesnesine yapılan değişiklikler uygulanmayacaktır. Örneğin, eğer biz değiştirdik: alt orta => at: sağ üst (belki de direktifin bir direktifini geçerek) bir etkisi olmayacaktır. – masimplo

AngularJS ciltleme jQuery qTip2 eklentisi

cevap

İlgili konular