Question

使用isotope和prettyPhoto创建带有角度js的图库视图，但获取错误无法在初始化之前调用同位素上的方法;试图调用方法＆＃39; reLayout＆＃39; 我在控制器中加载我的图库视图，如下所示：

的index.html

<ng-view></ng-view>

app.js

angular.module("myapp", ["ngRoute", "ui.bootstrap", "slickCarousel"]).
config(function($routeProvider, $locationProvider) {
  $routeProvider.
  when("/home", {
    templateUrl: "partial views/home.html"
  })
}).controller("portfolioController", function($scope, $location) {
  //Portfolio
  $scope.$watch("$viewContentLoaded", function() {
    "use strict";
    var $container = $('.portfolio'),
      $items = $container.find('.portfolio-item'),
      portfolioLayout = 'fitRows';

    if ($container.hasClass('portfolio-centered')) {
      portfolioLayout = 'masonry';
    }
    var init = false;
    $container.isotope({
      filter: '*',
      animationEngine: 'best-available',
      layoutMode: portfolioLayout,
      animationOptions: {
        duration: 750,
        easing: 'linear',
        queue: false
      },
      masonry: {}
    }, refreshWaypoints());

    function refreshWaypoints() {
      init = true;
      setTimeout(function() {}, 1000);
    }

    $('nav.portfolio-filter ul a').on('click', function() {
      var selector = $(this).attr('data-filter');
      $container.isotope({
        filter: selector
      }, refreshWaypoints());
      $('nav.portfolio-filter ul a').removeClass('active');
      $(this).addClass('active');
      return false;
    });

    function getColumnNumber() {
      var winWidth = $(window).width(),
        columnNumber = 1;

      if (winWidth > 1200) {
        columnNumber = 5;
      } else if (winWidth > 950) {
        columnNumber = 4;
      } else if (winWidth > 600) {
        columnNumber = 3;
      } else if (winWidth > 400) {
        columnNumber = 2;
      } else if (winWidth > 250) {
        columnNumber = 1;
      }
      return columnNumber;
    }

    function setColumns() {
      var winWidth = $(window).width(),
        columnNumber = getColumnNumber(),
        itemWidth = Math.floor(winWidth / columnNumber);

      $container.find('.portfolio-item').each(function() {
        $(this).css({
          width: itemWidth + 'px'
        });
      });
    }

    function setPortfolio() {
      setColumns();
      if (init) $container.isotope('reLayout');
    }

    $container.imagesLoaded(function() {
      setPortfolio();
    });

    $(window).on('resize', function() {
      setPortfolio();
    });
  });
})

home.html的

<div id="portfoliowrap" ng-controller="portfolioController">
    <h3>LATEST WORKS</h3>
    <div class="portfolio-centered">
        <div class="recentitems portfolio">
            <div class="portfolio-item graphic-design">
                <div class="he-wrap tpl6">
                    <img src="/img/portfolio/portfolio_09.jpg" alt="">
                    <div class="he-view">
                        <div class="bg a0" data-animate="fadeIn">
                            <h3 class="a1" data-animate="fadeInDown">A Graphic Design Item</h3>
                            <a data-rel="prettyPhoto" href="assets/img/portfolio/portfolio_09.jpg" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-search"></i></a>
                            <a href="single-project.html" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-link"></i></a>
                        </div><!-- he bg -->
                    </div><!-- he view -->
                </div><!-- he wrap -->
            </div><!-- end col-12 -->
            <div class="portfolio-item books">
                <div class="he-wrap tpl6">
                    <img src="/img/portfolio/portfolio_10.jpg" alt="">
                    <div class="he-view">
                        <div class="bg a0" data-animate="fadeIn">
                            <h3 class="a1" data-animate="fadeInDown">A Book Design Item</h3>
                            <a data-rel="prettyPhoto" href="assets/img/portfolio/portfolio_10.jpg" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-search"></i></a>
                            <a href="single-project.html" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-link"></i></a>
                        </div><!-- he bg -->
                    </div><!-- he view -->
                </div><!-- he wrap -->
            </div><!-- end col-12 -->

        </div><!-- portfolio -->
    </div><!-- portfolio container -->
</div><!--/Portfoliowrap -->

如您所见，我还使用了$scope.$watch("$viewContentLoaded",来确保加载了视图。但仍然高于错误。 Isotope工作正常，但prettyphoto无效，可能是因为此错误。希望得到一些指导。

Answer 1

嗯，在 @charlietfl - [非常感谢伙伴] 的帮助下，我能够在directives的帮助下解决这个问题。。以下是示例代码。

<强> app.js

angular.module("myapp", ["ngRoute", "ui.bootstrap", "slickCarousel"]).
config(function($routeProvider, $locationProvider) {
  $routeProvider.
  when("/home", {
    templateUrl: "partial views/home.html"
  })
}).controller("portfolioController", function ($scope, $location) {
    //Portfolio
    $scope.update = function () {
        $scope.imgList = [{
            url: "img/portfolio/portfolio_09.jpg",
            href: "assets/img/portfolio/portfolio_09.jpg",
            desc: "A Graphic Design Item"
        },
        {
            url: "/img/portfolio/portfolio_02.jpg",
            href: "assets/img/portfolio/portfolio_02.jpg",
            desc: "A Web Design Item"
        },
        {
            url: "/img/portfolio/portfolio_03.jpg",
            href: "assets/img/portfolio/portfolio_03.jpg",
            desc: "A Web Design Item"
        }];
    }
    $scope.update();
}).directive('isoRepeat', function ($timeout) {
    return {
        scope: {
            items: '=isoRepeat'
        },
        template: '<div class="portfolio-item graphic-design" ng-repeat="item in items"><div class="he-wrap tpl6"><img ng-src="{{item.url}}" /><div class="he-view">'
                  + '<div class="bg a0" data-animate="fadeIn">'
                  + '<h3 class="a1" data-animate="fadeInDown">{{item.desc}}</h3>'
                  + '<a data-rel="prettyPhoto" ng-href="{{item.href}}" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-search"></i></a>'
                  + '<!--<a href="single-project.html" class="dmbutton a2" data-animate="fadeInUp"><i class="fa fa-link"></i></a>-->'
                  + '</div><!-- he bg -->'
                  + '</div><!-- he view -->'
                  + '</div><!-- he wrap --></div><!-- end col-12 -->',
        link: function (scope, element, attrs) {

            var options = {
                filter: '*',
                animationEngine: 'best-available',
                itemSelector: '.portfolio-item',
                layoutMode: 'fitRows',
                animationOptions: {
                    duration: 750,
                    easing: 'linear',
                    queue: false
                }
            };

            element.isotope(options);
            scope.getColumnNumber = function () {
                var winWidth = $(window).width(),
                columnNumber = 1;

                if (winWidth > 1200) {
                    columnNumber = 5;
                } else if (winWidth > 950) {
                    columnNumber = 4;
                } else if (winWidth > 600) {
                    columnNumber = 3;
                } else if (winWidth > 400) {
                    columnNumber = 2;
                } else if (winWidth > 250) {
                    columnNumber = 1;
                }
                return columnNumber;
            }

            scope.setColumns = function () {
                var winWidth = $(window).width(),
                columnNumber = scope.getColumnNumber(),
                itemWidth = Math.floor(winWidth / columnNumber);

                $(element).find('.portfolio-item').each(function () {
                    $(this).css({
                        width: itemWidth + 'px'
                    });
                });
            }

            scope.setPortfolio = function () {
                scope.setColumns();
                $(element).isotope('reLayout');
            }
            $(window).on('resize', function () {
                scope.setPortfolio();
            });
            scope.$watch('items', function (newVal, oldVal) {
                $timeout(function () {
                    element.isotope('reloadItems').isotope();
                    scope.setPortfolio();
                });
            }, true);
        }
    };
});

<强> home.html的

<div class="recentitems portfolio" data-iso-repeat="imgList">
</div><!-- portfolio -->

在初始化之前不能调用同位素的方法;试图调用方法＆＃39; reLayout＆＃39; angularjs

1 个答案: