AngularJS ng-repeat 内容上的 Gridster jQuery 插件变坏了 [英] Gridster jQuery plugin on AngularJS ng-repeat content going bad

问题描述

我正在尝试将 Gridster 与 AngularJS 集成，但还没有取得太大的成功.

I'm trying to integrate Gridster with AngularJS, but without too much success yet.

阅读有关 Angular UI 的 ui-jq 指令的文档，我的印象是 这(检查小提琴) 应该工作.但是当我使用 Chrome 的调试器进一步查看时，结果是 这一行，它根本没有找到任何孩子.

Reading the documentation on Angular UI's ui-jq directive, I get the impression that this (check fiddle) should work. But when I look a bit further with Chrome's debugger, it turns out that on this line, it doesn't find any children at all.

我怀疑在 ng-repeat 指令的某个地方，AngularJS 决定删除将重复的部分，我明白为什么，但这并没有解决我的问题.我欢迎任何能帮助我走得更远的线索.

I suspect that somewhere in the ng-repeat directive, AngularJS decides to rip out the part that will be repeated, and I see why, but that doesn't solve my problem. I'd welcome any clue that would help me to get a little further.

我开始把它变成一个指令，希望能改善情况.但是，嵌套的 ng-repeat 也会妨碍自产指令.我尝试尽可能推迟连接 jQuery 插件 ($evalAsync) 等，最终使用了 $timeout.这是唯一的方法，我可以让它发挥作用.

I started turning it into a directive, hoping that would improve things. However, the nested ng-repeat is also getting in the way in case of a homegrown directive. I tried postponing hooking up the jQuery plugin as long as I could ($evalAsync) and alike, and eventually ended up using a $timeout. That's the only way in which I could get it working.

我认为最初的方法永远不会给我我需要的东西.所以实现了一个自定义指令.请看下面我的回答.

I think the original approach would have never given me what I needed. So implemented a custom directive. See my answer below.

推荐答案

我最终为此编写了自己的指令.我需要确保 gridster 可以看到对底层数据的每一次更改，但同时，我不想编写自己对数据模型的监控，并用一个指令替换你通常在 gridster 中所做的一切隐藏了这一切.(这将涉及在指令本身内实现大部分 ng-repeat .)

I eventually ended up writing my own directives for it. I needed to be sure that every change to the underlying data would be seen by gridster, but at the same time, I didn't want to write my own monitoring on the data model and replace everything you normally do within gridster with a directive that hides all of that. (It would involve implementing most of ng-repeat within the directive itself.)

这就是我所拥有的(并假设foo"是我的模块的名称):

This is what I have (and assume "foo" to be the name of my module):

foo.directive "gridster", () -> {
  restrict: "E"
  template: '<div class="gridster"><div ng-transclude/></div>'
  transclude: true
  replace: true
  controller: () ->
    gr = null
    return {
      init: (elem) ->
        ul = elem.find("ul")
        gr = ul.gridster().data('gridster')
        return
      addItem: (elm) ->
        gr.add_widget elm
        return
      removeItem: (elm) ->
        gr.remove_widget elm
        return
    }
  link: (scope, elem, attrs, controller) ->
    controller.init elem
}

foo.directive "gridsterItem", () -> {
  restrict: "A"
  require: "^gridster"
  link: (scope, elm, attrs, controller) ->
    controller.addItem elm
    elm.bind "$destroy", () ->
      controller.removeItem elm
      return
} 

有了这个，我可以有一个网格生成的视图，通过添加这个:

With this, I can have a gridster generated view, by adding this:

<gridster>
  <ul>
    <li ... ng-repeat="item in ..." gridster-item>
      <!-- Have something here for displaying that item. -->
      <!-- In my case, I'm switching here based on some item properties. -->
    </li>
  </ul>
</gridster>

每当在 ng-repeat 指令观察到的集合中添加或删除项目时，它们将自动从 gridster 控制的视图中添加和删除.

Whenever items are added to or removed from the collection observed by the ng-repeat directive, they will be automatically added and removed from gridster controlled view.

编辑

这是一个 plunk 演示了该指令的稍微修改版本:

Here is a plunk demonstrating a slightly modified version of this directive:

angular.module('ngGridster', []);

angular.module('ngGridster').directive('gridster', [
    function () {
        return {
            restrict: 'E',
            template: '<div class="gridster"><div ng-transclude/></div>',
            transclude: true,
            replace: true,
            controller: function () {
                gr = null;
                return {
                    init: function (elem, options) {
                        ul = $(elem);
                        gr = ul.gridster(angular.extend({
                          widget_selector: 'gridster-item'
                        }, options)).data('gridster');
                    },
                    addItem: function (elm)  {
                        gr.add_widget(elm);
                    },
                    removeItem: function (elm) {
                        gr.remove_widget(elm);
                    }
                };
            },
            link: function (scope, elem, attrs, controller) {
              var options = scope.$eval(attrs.options);
              controller.init(elem, options);
            }
        };
    }
]);

angular.module('ngGridster').directive('gridsterItem', [
    function () {
        return {
            restrict: 'EA',
            require: '^gridster',
            link: function (scope, elm, attrs, controller) {
                controller.addItem(elm);
                elm.bind('$destroy', function () {
                    controller.removeItem(elm);
                });
            }
        };
    }
]);

这篇关于AngularJS ng-repeat 内容上的 Gridster jQuery 插件变坏了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！