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的这些新加载的图像。

如何从ngquery中获取这些新加载的ng-controller？如何制作动态加载的图像＆＃39; 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
            });
        });
    };
});

Haven没有尝试使用您的代码，但应该可以使用。

angularjs - 从jquery绑定ng-click以动态加载DOM

1 个答案: