在 ng-repeat 中动态添加类

Question

我是 Angular 的新手，在这个问题上遇到了困难。我正在使用 masonry 在 ng-repeat 中构建图像和视频的动态集合，并希望随机化我用于图像的大小调整类。 IE。如果 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
        });
        });


      }
    };
}

很遗憾，它不起作用。我尝试使用其他问题中的一些解决方案，例如dynamically adding directives in ng-repeat但无济于事。 显然，我在指令等方面对 Angular 有很多不理解的地方，因此我们将不胜感激任何帮助。 谢谢！

Answer 1

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

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

更新 Here is a sample JSFiddle 证明它有效。我使<div>s 变宽并带有边框，以便更容易在 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>