在ng-repeat中动态添加类

Question

我是新手，对这个问题一直很艰难。 我正在使用砖石结构以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中动态添加指令，但无济于事。 显然，关于Angular的很多事情我在指令等方面都不了解，因此任何帮助将不胜感激。 谢谢！

Answer 1

require:'^mfMason'正在寻找一个名为mfMason的控制器 ，但是您有一个名为mfMason的指令 。 尝试从您的randomClass指令中删除require:'^mfMason',然后看看它是否有效。

我很惊讶您没有在控制台中看到与此相关的错误。

更新 这里是一个示例JSFiddle，证明它可以工作。 我将<div>的宽度加宽并加了边框，以使在Chrome开发工具中右键单击和检查变得更加容易。 随机添加您的类后，我还会输出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>