динамическое добавление классов в повторе

Question

динамическое добавление классов в повторе

0

Я новичок в угловатости и с этим вопросом нелегко. Я использую кладки для создания динамического набора изображений и видео в ng-repeat и хотел бы рандомизировать классы размеров, которые я использую для изображений. Т.е. если элемент в ng-repeat является изображением, примените к нему один из двух классов.

Пока у меня есть это для шаблона:

<div class="modalVid" ng-repeat="m in mediaList | filter:mediaType track by $index">
<a ng-if="m.type=='video'" zf-open="basicModal_{{$index}}" class="grid-item grid-item--video" ng-click="modalOpen()" style="background-image: url({{m.thumb}}); background-size: cover; background-repeat:no-repeat;"></a>
<a ng-if="m.type=='image'" zf-open="basicModal_{{$index}}" ng-class="grid-item" random-class ng-click="modalOpen()" style="background-image: url({{m.thumb}}); background-size: cover; background-repeat:no-repeat;"></a>
    <div ng-if="m.type=='video'"  class="" zf-modal="" id="basicModal_{{$index}}">
        <iframe width="560" height="315" ng-src="{{iFrameSrc(v.videoid)}}" frameborder="0" allowfullscreen></iframe>
    </div>
    <div ng-if="m.type=='image'" zf-modal="" class="large" id="basicModal_{{$index}}">
        <img src="{{m.screenshot}}">
    </div>

Я использую директиву под названием random-class для вставки класса:

angular.module('mfApp')
.directive('randomClass', randomClass);

function randomClass(){

    return {
    restrict: 'AE',
    require:'^mfMason',
    link: function(scope, elem, attrs){

            var classArr = ['grid-item--width2 grid-item--height2', 'grid-item--width1 grid-item--height1'];
            var newClass = classArr[Math.floor(Math.random() * classArr.length)];

            elem.addClass(newClass);


    }
    }

}

И оболочка кладки сама по себе является директивой:

angular.module('mfApp')
.directive('mfMason', mfMason);

function mfMason(){
    return{
    restrict: 'AE',
    transclude:true,
    templateUrl: 'templates/masonry_build.html',
    controller:function($scope){
        $scope.classes = ['grid-item--width2 grid-item--height2', 'grid-item--width1 grid-item--height1'];
    },
    link: function(scope, elem, attr){
        var $grid = $('.grid').imagesLoaded(function(){
        $grid.isotope({
          itemSelector: '.grid-item',
          columnWidth: 182,
          gutter:1
        });
        });


      }
    };
}

К сожалению, это не работает. Я попытался использовать некоторые из решений других вопросов, например динамически добавляя директивы в ng-repeat, но безрезультатно. Есть много вещей об Угловом Я не понимаю с точки зрения директив и т.д., Поэтому любая помощь была бы весьма признательна. Благодарю!

defmigroggie 22 март 2016, в 21:19

Источник

Теги:

javascript

angularjs

angularjs-directive

angularjs-ng-repeat

1 ответ

Ещё вопросы

Lex · Answer 1 · 2016-03-22T18-37-00.000Z

require:'^mfMason' ищет контроллер с именем mfMason, но у вас есть директива mfMason. Попробуйте удалить require:'^mfMason', из вашей директивы randomClass и посмотреть, работает ли она тогда.

Я удивлен, что вы не заметили ошибки в этой консоли.

Обновление Вот пример JSFiddle, демонстрирующий, что он работает. Я сделал <div> широким и с рамкой, чтобы было проще щелкнуть правой кнопкой мыши и проверить в инструментах Chrome dev. Я также выдаю атрибут class после случайного добавления ваших классов.

Здесь javascript:

angular.module('app', [])
    .directive('randomClass', function() {
        return {
            restrict: 'AE',
            link: function(scope, element, attrs) {
                var classArr = ['grid-item--width2 grid-item--height2', 'grid-item--width1 grid-item--height1'];
                var newClass = classArr[Math.floor(Math.random() * classArr.length)];
                element.addClass(newClass);
                element.text(element.attr('class'));
            }
        }
    });

И вот html:

<div ng-app="app">
    <div random-class class="something" style="border: 1px solid black; height:100px; width:300px;"></div>
    <div random-class class="something" style="border: 1px solid black; height:100px; width:300px;"></div>
    <div random-class class="something" style="border: 1px solid black; height:100px; width:300px;"></div>
    <div random-class class="something" style="border: 1px solid black; height:100px; width:300px;"></div>
    <div random-class class="something" style="border: 1px solid black; height:100px; width:300px;"></div>
    <div random-class class="something" style="border: 1px solid black; height:100px; width:300px;"></div>
</div>

Ах! Это печальный побочный результат взлома различных решений и в конечном итоге кода Франкенштейна. Это не работает без него, хотя
@defmigroggie Я смог заставить его работать. Я только что обновил ответ.
Спасибо Лекс! Я определенно вижу, как это работает в твоей скрипке. Я думаю, что проблема у меня заключается в том, что я импортирую директиву random-class в другую директиву и каким-то образом делаю это неправильно. Так что, к сожалению, это не работает для меня.