不能調用同位素的方法;試圖調用方法「重新佈局」 angularjs

Question

使用isotope和prettyPhoto創建我的角度js圖庫查看，但得到誤差不能呼籲在初始化之前同位素方法;試圖調用方法 '重新佈局'我在加載控制我的相冊查看如下：

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