ng-repeatでクラスを動的に追加

Question

私は新しく、この問題で苦労しています。私は石積みを使ってng-repeatで画像と動画の動的なコレクションを作成しています。画像に使用するサイジングクラスをランダム化したいと思います。私。 ng-repeatの項目が画像の場合は、2つのクラスのうちの1つを適用します。

これまでのところ、私はテンプレートのためにこれを持っている：

<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> 

私はクラスを挿入するために、ランダム・クラスと呼ばれるディレクティブを使用しています：

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>を幅広く、境界線を使って作成して、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>