带有服务器端数据的角度砌体指令

Question

我将如何应用带有 angular 指令的砌体网格，其中元素是在服务器端创建的，而 angular 通过 ajax 获取它。当它加载时应该检查指令而不是简单地应用砖石jQuery

来自砌体示例

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options...
  itemSelector: '.item',
  columnWidth: 200
});

我的尝试

angular.module('myApp')
  .directive('masonry', function($parse) {
      return{
        restrict: "E",       
        compile: function (element, attrs) {

                element.masonry({
                    itemSelector: '.masonry-brick',
                    columnWidth: 70
                });


        }
      } 
    });

服务器端生成的标记

<masonry>
  <div class="masonry-brick">
     <a href="#"><img src="/path/to/image" /></a>
  </div>
</masonry>

关键是我的 masonry 指令标记是由另一个指令生成的，它看起来跟在后面

angular.module('myApp')
  .controller('SlugCtrl', function ($scope, WpApi, $compile, $filter, ngProgressLite, $timeout) {

    // the Content to be rendered.
   $scope.maincontent = [];
   //loading animate starts
   ngProgressLite.start();
   loadRemoteData();



   // load remote data from the server.
   function loadRemoteData() {
   // The WpApiService returns a promise.
        WpApi.getContents()
        .then(
            function( post ) {       
                applyRemoteData( post );       
            });    
    }

     // apply the remote data to the local scope.
    function applyRemoteData( newContents ) {   

        $scope.maincontent  = $compile( newContents[0].content )($scope);  

        //$scope.maincontent  = $compile( newContents[0].content )($scope);  
        //console.log($scope.maincontent); 

    }

  //loading animate ends
  ngProgressLite.done();        

}).directive('maincontent', function() {

    return {
            restrict: 'A',
                scope: {
                    maincontent: '=maincontent'
                },

                link: function (scope, element, attrs) {                 
                  scope.$watch('maincontent', function(val) {
                        if(!val) { return; }
                        element.append( val  );                                      
                    });                              
                  }
                };
})

然后我在第二个指令上尝试了以下指令，该指令在砌体上触发，但它们不会以 popper 方式呈现并且在调整大小屏幕上会跳过

angular.module('myApp')
  .directive('masonry', function($parse) {
      return{
        restrict: "E",       
        compile: function (element, attrs) {
            var selector = element.parent('.gallery');

            if(selector){
                selector.masonry({
                    itemSelector: '.masonry-brick',
                    columnWidth: 70
                });
                console.log(selector);
            } else {
                alert();
            }

        }
      } 
    });

问题似乎与父容器上的错误计算有关

检查我得到的 dom style="position: relative; height: 22233px;" 高度很大

Answer 1

在applyRemoteData 中的$compile 下方添加$scope.$digest()：

function applyRemoteData( newContents ) {   

    $scope.maincontent  = $compile( newContents[0].content )($scope);  
    $scope.$digest()
    //$scope.maincontent  = $compile( newContents[0].content )($scope);  
    //console.log($scope.maincontent); 

}