SORU
1 Kasım 2012, PERŞEMBE


Tam olarak transclude işlevi ve Klon bağlama işlevi ne olacak?

** 8, işlev, derleme görmek İ transclude 3 parametreleri vardır. Belgeleri sağlamak tek açıklaması vardır:

transclude - transclude bağlayan Bir fonksiyon: fonksiyon(kapsam, cloneLinkingFn).

Klon işlevi bağlama ne olacağını anlamaya çalışıyorum. Hatta parametreleri içine geçmiş olsun ne olduğunu bilmiyorum. Bir HTML öğesi gibi görünen bir parametre clone çağırdı one example buldum. Diğer parametreler mevcuttur? Hangi HTML elemanı bu tam olarak nedir? Ayrıca muhtemelen benim Direktifi transclude: 'element' kullanarak bakıyorum. Bu soruların cevapları true yerine 'element' kullanırken değişir?

Basit bir örnekle transclusion anlıyorum, ama daha karmaşık örnekler bulmak, özellikle transclude: 'element' ile görünmek istemiyorum. Birileri bu konuda daha ayrıntılı bir açıklama sağlayabilir diye umuyorum. Teşekkürler.

CEVAP
1 Kasım 2012, PERŞEMBE


EDİT: Tamamen benim cevabım değişen ve "Topluluk Wiki" (benim için hiç puan anlamında) ben de bu konuyu açtığında . düpedüz yanlış olduğu gibi bu işaretleme

@Jonah olarak aşağıda işaret here is a really good article on the compile option of directives and using the transclusion function

Temel fikir işlev derleme bağlama işlevi dönmelidir. Transclusion işlevi bağlama işlevi içinde sağlanan transcluded DOM öğesi bir klon almak, derlemek ve takılı olması gereken yere ekleyebilirsiniz.

Here is a better example I've pulled out of my butt on Plunker

İşlev derleme fikri programlı olarak DOM öğeleri, öznitelikleri bağlama işlevi oluşturulan ve çağrılmadan ÖNCE vefat dayalı değiştirmek için bir şans verir.

// a silly directive to repeat the items of a dictionary object.
app.directive('keyValueRepeat', function ($compile){
  return {
    transclude: true,
    scope: {
      data: '=',
      showDebug: '@'
    },
    compile: function(elem, attrs, transclude) {

      if(attrs.showDebug) {                
        elem.append('<div class="debug">DEBUG ENABLED {{showDebug}}</div>');
      }

      return function(scope, lElem, lAttrs) {
        var items = [];
        console.log(lElem);
        scope.$watch('data', function(data) {

          // remove old values from the tracking array
          // (see below)
          for(var i = items.length; i-- > 0;) {
            items[i].element.remove();
            items[i].scope.$destroy();
            items.splice(i,1);
          }

          //add new ones
          for(var key in data) {

            var val = data[key],
                childScope = scope.$new(),
                childElement = angular.element('<div></div>');

            // for each item in our repeater, we're going to create it's
            // own scope and set the key and value properties on it.
            childScope.key = key;
            childScope.value = val;

            // do the transclusion.
            transclude(childScope, function(clone, innerScope) {
              //clone is a copy of the transcluded DOM element content.
              console.log(clone);

              // Because we're still inside the compile funciton of the directive,
              // we can alter the contents of each output item
              // based on an attribute passed.
              if(attrs.showDebug) {                
                clone.prepend('<span class="debug">{{key}}: {{value}}</span>');
              }

              //append the transcluded element.
              childElement.append($compile(clone)(innerScope));
            });

            // add the objects made to a tracking array.
            // so we can remove them later when we need to update.
            items.push({
              element: childElement,
              scope: childScope
            });

            lElem.append(childElement);
          }
        });
      };
    }
  };
});

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • ChrisCrossMedia

    ChrisCrossMe

    17 EYLÜL 2009
  • eyes4beautee

    eyes4beautee

    17 HAZİRAN 2011
  • Fr. Eckle Studios

    Fr. Eckle St

    29 Kasım 2006