WebHU - Programozási kérdések és válaszok

ng-repeat egy olyan direktíván belül, amelyre nem alkalmaznak direktívafunkciókat

Alapvetően megpróbálom az izotópot egy szögirányelvbe csomagolni. Az izotóp-bővítményt a .card a, b és c esetén hívják, de a d-ek közül egyiket sem. Hogyan szerezhetem be az ng-repeat összes .card-ját, hogy az izotóp direktívát alkalmazzák rájuk?

<div id="cardHolder" isotope>
  <div class="card">a</div>
  <div class="card w2">b</div>
  <div class="card">c</div>
  <div class="card" ng-repeat="user in users">d</div>
</div>

irányelv

angular.module('web').directive('isotope', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs, fn) {

      $(element).isotope({
        itemSelector: '.card',
        layoutMode: 'fitRows',
      });

    }
  };
});

Megtaláltam ezt, de úgy tűnik, nem tesz semmit a helyzetemben

javascript angularjs angularjs-directive
19.05.2014

  • Meg tudnád adni a html-jét ng-repeattel? 19.05.2014
  • Elnézést, elfelejtettem formázni, hogy láthassa. 19.05.2014

Válaszok:


1

Állítson be egy $watch-ot (vagy ebben az esetben $watchCollection-t) a ng-repeat elemein, és indítsa el az Isotope tárolót, amint a böngésző megjelenik. Ha bármilyen új elem jelenik meg a scope.users-ban, töltse be/rajzolja újra a tárolót az új elemekkel együtt:

.directive('isotope', function($timeout) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs, fn) {
      var init;
      scope.$watchCollection('users', function(val){
        $timeout(function(){
          if(!init) {
            $(element).isotope({
              itemSelector: '.card',
              layoutMode: 'fitRows'
            });
            init = true;
          } else {
            $(element).isotope('reloadItems').isotope();
          }
        });
      });  
    }
  }
});

Plunker bemutató

19.05.2014
  • @Marc Kline Te vagy a király ember! Ma több mint 8 órája kerestem ezt! Egészségére! 20.07.2016

    • 2

    Kezdő vagyok angularjs-ban. Ha egyszer ugyanaz a problémám van a customSelect jquery beépülő modullal.

    Megoldottam a $timeout(angular's setTimeout()) segítségével.

    Számodra ez így fog kinézni:

    app.directive('isotope', ['$timeout', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs, fn) {
            $timeout(function() {
                $(element).isotope({
                    itemSelector: '.card',
                    layoutMode: 'fitRows'
                });
            }, 0);
        }
    };
}]);

    Biztos vagyok benne, hogy az ilyen viselkedés oka a hatókör és a widget/plugin újraalkalmazási problémája. Az Isotop nem vár az ng-repeat-re.

    Erre a problémára konkrétabb megoldást kellene találni. De a "gyors megoldásnál" a $timeout segít.

    19.05.2014
    Új anyagok
    A rádiógomb ellenőrzött eseményének használata a jQueryben
    Ebben a cikkben látni fogjuk, hogyan kell dolgozni a jquery választógombbal ellenőrzött eseményeivel. A választógombok HTML gombok, amelyek segítenek kiválasztani egyetlen értéket egy csoportból...
    Körkörös függőségek megoldása terraformban adatforrásokkal – lépésről lépésre
    Mi az a körkörös függőségek Dolgozzunk egy egyszerű eseten, amikor az SQS-sor és az S3-vödör közötti körkörös függőség problémája van egy egymástól függő címkeérték miatt. provider..
    Miért érdemes elkezdeni a kódolást 2023-ban?
    01100011 01101111 01100100 01100101 — beep boop beep boop Világunk folyamatosan fejlődik a technológia körül, és naponta fejlesztenek új technológiákat a valós problémák megoldására. Amint..
    🎙 Random Noise #2  – Örökbefogadás és hit
    az analitika íratlan világának gondozása Szeretné, hogy ezek a frissítések a postaládájába kerüljenek? Iratkozzon fel itt . "Ha önvezető autókat gyártanak, akkor mi miért ne..
    A legrosszabb politika és prediktív modellek májátültetésre jelöltek számára az Egyesült Államokban
    A máj (vagy óangolul lifer) az emberi test legnehezebb belső szervére utal, amely csendesen működik a nap 24 órájában. Mit csinál a máj? 500 feladatot hajt végre a szervezet egészségének..
    5 webhely, amely 2022-ben fejleszti front-end fejlesztői készségeit
    Frontendmentor.io A tényleges projektek létrehozásával a Frontendmentor.io segítséget nyújt a front-end kódolási képességeinek fejlesztésében. A kódolást azután kezdheti meg, hogy..
    Mikor kell használni a Type-t az interfészhez képest a TypeScriptben?
    A TypeScript a JavaScript gépelt szuperkészlete, amely statikus gépelést ad a nyelvhez. Ez megkönnyíti a robusztus és karbantartható kód írását azáltal, hogy a hibákat a fordítási időben..