ليتغاليري (المساعد مسج) في أنغولارجس [javascript]


Answers

يتيح لك استخدام مجموعة من التوجيهين تحديد أحد الوالدين من خلال توجيه، فضلا عن تمرير الخيارات إلى متغير النطاق، والذي يوفر الفرصة لمزيد من التخصيص للمعرض الضوئي. التوجيه الثانوي يدفع الوالد لربط (باستخدام نفس الفكرة المقدمة في حل @ كلر)

هذا التوجيه هو للعنصر الأم، وكنت قد تمر متغير نطاق غاليريوبتيونس التي يتم تمريرها ببساطة على طول عندما ملزمة معرض الخفيفة:

.directive('lightGallery', function() {
    return {
        restrict: 'A',
        scope: {
            galleryOptions: '='
        },
        controller: function($scope) {

            this.initGallery = function() {
                $scope.elem.lightGallery($scope.galleryOptions);
            };

        },
        link: function(scope, element, attr) {
            scope.elem = element;
        }
    }
})

هذا التوجيه هو لكل "بند" في معرض الضوء:

.directive('lightGalleryItem', function() {
    return {
        restrict: 'A',
        require: '^lightGallery',
        link: function (scope, element, attrs, ctrl) {

            if (scope.$last) {
                ctrl.initGallery();
            }

        }
    }
})

الترميز الناتج (الذي يمكن أن يكون حقا أي شيء تريد عن طريق تحديد الخيار selector عند تهيئة معرض الضوء):

<ul light-gallery gallery-options="galleryOptions">
    <li ng-repeat="photo in album.photos" data-src="{{photo.fullres}}" light-gallery-item>
        <img ng-src="{{photo.thumbnail}}" />
    </li>
</ul>

في حين أن الخيارات قد تكون أي خيارات معرض معرض صالحة، مثل:

$scope.galleryOptions = {
    selector: '.file-trigger',
    ...
};
Question

أحاول الحصول على ليتغاليري جكري المساعد ( http://sachinchoolur.github.io/lightGallery/index.html ) للعمل مع أنغولارجس.

لقد وجدت بعض الإجابات التي اقترحت أنني بحاجة إلى توجيه، لذلك أنا خلقت ما يلي:

.directive('lightGallery', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            jQuery(element).lightGallery();
        }
    };
})

ثم في رأيي أفعل ذلك:

<ul lightGallery>
    <li ng-repeat="photo in album.photos" data-src="{{photo.fullres}}">
        <img ng-src="{{photo.thumbnail}}" />
    </li>
</ul>

(حاولت أيضا مع <ul light-gallery> ) عند تشغيل الصفحة لا يحدث أي شيء عند النقر فوق أي من الصور المصغرة. يمكنني وضع alert() في وظيفة الارتباط، على الرغم من، وهذا هو عرض.

كيف يمكنني الحصول على أنغولارجس للعب جنبا إلى جنب مع مسج وهذا البرنامج المساعد؟

تحديث:

بعد بعض التصحيح يبدو أن jQuery(element).lightGallery() يتم تنفيذه قبل النموذج لا بد من وجهة النظر. لذا فإن السؤال هو كيف يمكنني الحصول على توجيه ليتم استدعاؤه عندما يكون كل شيء ملزما وليس قبل ذلك.