angularjs - 绑定为动态加载DOM从jquery的

Question

纳克点击我有一个NG控制器PostsListController控制ng-click用于加载的图像

<div ng-controller='PostsListController'> 
    <ul id="wookmark_container"> 
    <% @posts.each do |post|%> 
    <li> 
     <a href='#' ng-click="open()"> <img src="image_path" ></a> 
    </li> 
    <%end%> 
    </ul> 
    </div> 


angular.module('myapp') 
    .controller('PostsListController', function($scope, $http){ 

    $scope.open = function(postId){ 
    }; 
    }; 

}); 


    <script type="text/javascript"> 
    (function ($) { 
     var container = '#wookmark_container', 
     $container = $(container), 
     tileCount = 30, 
     $window = $(window), 
     $document = $(document), 
     wookmark; 

    // Initialize Wookmark 
    wookmark = new Wookmark(container, { 
    offset: 5, // Optional, the distance between grid items 
    outerOffset: 10, // Optional, the distance to the containers border 
    itemWidth: 260 // Optional, the width of a grid item 
    }); 

     function onScroll() { 

     var winHeight = window.innerHeight ? window.innerHeight : $window.height(), // iphone fix 
      closeToBottom = ($window.scrollTop() + winHeight > $document.height() - 100); 
     if (closeToBottom) { 

      var $items = $('li', $container), 
       $firstTen = $items.slice(0, 10).clone().css('opacity', 0); 
      $container.append($firstTen); 
      wookmark.initItems(); 
      wookmark.layout(true, function() { 
      // Fade in items after layout 
      setTimeout(function() { 
       $firstTen.css('opacity', 1); 
      }, 300); 
      }); 
     } 
     }; 
     // Capture scroll event. 
     $window.bind('scroll.wookmark', onScroll); 
    })(jQuery); 
    </script> 

更新脚本

HTML的一部分中加入scroll

<ul scroll id="wookmark_container" style="position: relative">

angular.module('bidwars').directive("scroll", function ($window) { 
     return function(scope, element, attrs) { 
      angular.element($window).bind("scroll", function() { 
       scope.$apply(function(){ 
        // write your jquery logic here 

        var container = '#wookmark_container', 
         $container = $(container), 
         tileCount = 30, 
         $window = $(window), 
         $document = $(document), 
         wookmark; 

        // Initialize Wookmark 
        wookmark = new Wookmark(container, { 
        offset: 5, // Optional, the distance between grid items 
        outerOffset: 10, // Optional, the distance to the containers border 
        itemWidth: 260 // Optional, the width of a grid item 
        }); 

        var winHeight = window.innerHeight ? window.innerHeight : $window.height(), // iphone fix 
         closeToBottom = ($window.scrollTop() + winHeight > $document.height() - 100); 
        if (closeToBottom) { 
        // Get the first then items from the grid, clone them, and add them to the bottom of the grid 
        var $items = $('li', $container), 
         $firstTen = $items.slice(0, 10).clone().css('opacity', 0); 
        $container.append($firstTen); 
        wookmark.initItems(); 
        wookmark.layout(true, function() { 
         // Fade in items after layout 
         setTimeout(function() { 
         $firstTen.css('opacity', 1); 
         }, 300); 
        }); 
        } 
       }); 
      }); 
     }; 
    }); 



    (function ($) { 
     var container = '#wookmark_container', 
      $container = $(container), 
      tileCount = 30, 
      $window = $(window), 
      $document = $(document), 
      wookmark; 

     // Initialize Wookmark 
     wookmark = new Wookmark(container, { 
     offset: 5, // Optional, the distance between grid items 
     outerOffset: 10, // Optional, the distance to the containers border 
     itemWidth: 260 // Optional, the width of a grid item 
     }); 

    })(jQuery); 

它适用于初始页面加载时加载的所有图像。但是当我使用jquery加载更多图像到wookmark_container。 ng-click不适用于来自jquery的新加载的图像。我的猜测是ng-controller不知道这些来自jquery的新加载的图像。

如何让ng-controller现在从jquery中加载这些新的？如何使动态加载的图像'ng-click事件工作？

Answer 1

在你的控制，包装您更新代码$apply，像这样 -

$scope.$apply(function() { 
     // update your html by jQuery 
    }); 

这将确保AngularJS引擎知道的任何变化DOM。

阅读this了解更多详情。

你可以做这样的事情 -

app.directive("scroll", function ($window) { 
    return function(scope, element, attrs) { 
     angular.element($window).bind("scroll", function() { 
      $scope.$apply(function(){ 
       // write your jquery logic here 
      }); 
     }); 
    }; 
}); 

有没有你的代码尝试这样做，但应该工作。