angular-masonry-directive 모듈 imagesLoaded 에러

angular-masonry-directive 라는 모듈이 있다. Masonry 배치를 jQuery 없이 구현할 수 있고 무엇보다도 사용이 무척 간단하다. 그런데 이 directive 모듈을 로드하고 앱을 실행시키면 function undefined 에러가 발생하는데 소스파일을 수정해 주면 말끔히 해결된다. 글을 쓰는 시점을 기준으로 60행을 보면 directive(‘masonryTile’) 로 시작하는 코드가 보인다. 코드를 아래와 같이 수정하자.

}).directive('masonryTile', function () {
  return {
    restrict: 'AC',
    link: function(scope, elem) {
    // 생략
    if (update) {
      // 원래 소스 
      // imagesLoaded( elem.get(0), update);

      // 수정된 소스
      imagesLoaded( elem.eq(0), update);
    }
    if (appendBricks) {
      // 원래 소스
      // imagesLoaded( elem.get(0), appendBricks(elem));

      // 수정된 소스
      imagesLoaded( elem.eq(0), appendBricks(elem));
    }

    // 이하 생략

제대로 작동할 것이다. 하지만, bower를 이용해서 설치한 경우라면 또 다른 에러가 발생한다. Dependency 모듈인 masonry 문제인데 기본 파일이 masonry.js 로 되어있다. 같은 디렉토리에 있는 masonry.pkgd.js 로 바꿔서 로드하면 해결된다. gulp나 grunt를 이용해서 injection 을 자동으로 수행하고 있는 경우라면, bower.json 을 수정하면 된다. bower.json 에 아래 내용을 추가하자.

"overrides" : {
  "masonry": {
    "main": "./dist/masonry.pkgd.js",
    "dependencies": {}
  }
}

gulp나 grunt에 설치된 모듈(보통 main-bower-files 일 것이다)이 메인 파일을 masonry.pkgd.js 로 변경해서 injection 해 줄것이다. 아 근데 정말 사람을 왜 이렇게 괴롭혀요…

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>