16

レイアウトのために同位体に供給するためにdivをロードするためにangularを使用しようとしています。何らかの理由で、ng-repeatを使用してdivを作成できません。私が次のようなことをするとき、それはうまくいきます：

[agg.html]

<div class="mygrid" iso-grid>
    <div class="item">myitem</div>
</div>

[controlers.js]

module.directive('isoGrid', function () {
    return function (scope, element, attrs) {
        element.isotope({
            itemSelector: '.item'
        });
    };
});

module.controller('aggViewport', ['$scope', '$location', function ($scope, $location) {
    $scope.cards = [{
        "ID": "myid",
        "class": "cardListTile",
        "badge": "1"
    } {
        "ID": "myid2",
        "class": "cardListTile",
        "badge": "2"
    }]
}]);

上記は問題なく動作しますが、angularからng-repeatを使用しようとすると、divが見えなくなったように見えます（それらはdomにありますが、表示されません）。isotope（'reloadItems'）とisotope（'reLayout'）を呼び出してみましたが、役に立たないようです。

[agg.html]

<div class="mygrid" iso-grid ng-repeat="card in cards">
    <div class="item">myitem</div>
</div>

ng-repeatを使用するにはどうすればよいですか？

4

2 に答える 2

22

リスト変数（カード）を$ watchしてみてください。変更されるたびに、同位体を再適用してください。あなたの問題は、ng-repeatが入力される前に同位体が実行されていることだと思います。

簡単な例：

scope.$watch(attrs.ngModel, function() {
  elm.isotope();
});
于 2012-08-10T15:45:16.757 に答える
10

エンター/リーブアニメーションに石積みディレクティブ+ng-animateを使用して同様の何かを実装しました。これは、CSSアニメーションのみのデモです（ChromeベンダーのプレフィックスがCSSになっています）。

http://jsfiddle.net/g/3SH7a/

ディレクティブ：

angular.module('app', [])
.directive("masonry", function () {
    var NGREPEAT_SOURCE_RE = '<!-- ngRepeat: ((.*) in ((.*?)( track by (.*))?)) -->';
    return {
        compile: function(element, attrs) {
            // auto add animation to brick element
            var animation = attrs.ngAnimate || "'masonry'";
            var $brick = element.children();
            $brick.attr("ng-animate", animation);

            // generate item selector (exclude leaving items)
            var type = $brick.prop('tagName');
            var itemSelector = type+":not([class$='-leave-active'])";

            return function (scope, element, attrs) {
                var options = angular.extend({
                    itemSelector: itemSelector
                }, attrs.masonry);

                // try to infer model from ngRepeat
                if (!options.model) { 
                    var ngRepeatMatch = element.html().match(NGREPEAT_SOURCE_RE);
                    if (ngRepeatMatch) {
                        options.model = ngRepeatMatch[4];
                    }
                }

                // initial animation
                element.addClass('masonry');

                // Wait inside directives to render
                setTimeout(function () {
                    element.masonry(options);

                    element.on("$destroy", function () {
                        element.masonry('destroy')
                    });

                    if (options.model) {
                        scope.$apply(function() {
                            scope.$watchCollection(options.model, function (_new, _old) {
                                if(_new == _old) return;

                                // Wait inside directives to render
                                setTimeout(function () {
                                    element.masonry("reload");
                                });
                            });
                        });
                    }
                });
            };
        }
    };
})
于 2013-06-13T21:39:55.487 に答える