角度app，砖石不是功能

Question

我正在尝试使用我的第一个角度应用程序的砌体。我之前没有成功地使用过砖石，但我一直遇到这个问题。我一直在接受，Uncaught TypeError：$（...）。masonry不是一个函数。这是我的代码。

控制器

angular.module('cityApp')
  .controller('RestaurantsCtrl', function ($scope, locationsService) {

    locationsService.locations(locationsService.restaurants);

    angular.element(document).ready(function() {
      $('.grid').imagesLoaded(function() {
        $('.grid').masonry({
          itemSelector: '.grid-item',
          columnWidth: '.grid-sizer',
          gutter: 3,
          percentPosition: true
        });
      });
    });

  });

查看

<main>
  <div class="container">
    <div class="row">
      <div class="grid">
        <div class="grid-sizer"></div>
      </div>
    </div>
  </div>
</main>

服务

angular.module('cityApp')
  .service('locationsService', function (ngGPlacesAPI) {

    var x, id, details;

    this.locations = function(type) {
      for (x in type) {
        id = type[x];
        ngGPlacesAPI.placeDetails({placeId: id}).then(function (data) {
          details = data;
          $('<div class="grid-item thumbnail">\
                <img src='+ details.photos[0].getUrl({"maxWidth": 500, "maxHeight": 500}) + ' >\
                <div class="caption">\
                  <h3>' + details.name + '</h3>\
                  <p> Rating: ' + details.rating + '</p>\
                  <p>Address: '+ details.formatted_address +'</p>\
                </div>\
              </div>\
            </div>').insertAfter('.grid-sizer')
        })
      }
    }
  });