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
        });
        });


      }
    };
}

可悲的是，它不起作用。我尝试过使用其他问题的一些解决方案，例如dynamically adding directives in ng-repeat但无济于事。很明显很多关于Angular的东西我在指令等方面都不理解，所以任何帮助都会非常感激。谢谢！

Answer 1

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

我很惊讶你没有在控制台中看到有关此内容的错误。

<强>更新 Here is a sample 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>

在ng-repeat

1 个答案: