AngularJS ng-repeat内容上的Gridster jQuery插件变坏了

Question

我正在尝试将Gridster与AngularJS 集成,但还没有太多成功.

阅读Angular UI ui-jq指令的文档,我得到的印象是这个(检查小提琴)应该有效.但是当我对Chrome的调试器进一步了解时,事实证明,在这一行上,它根本找不到任何孩子.

我怀疑在ng-repeat指令的某处,AngularJS决定撕掉将要重复的部分,我明白为什么,但这并不能解决我的问题.我会欢迎任何有助于我进一步发展的线索.

更新1

我开始把它变成一个指令,希望这会改善一些事情.但是,在ng-repeat本地指令的情况下,嵌套也会妨碍.我试图推迟连接jQuery插件,只要我能($evalAsync)和类似,并最终最终使用$timeout.这是我能让它发挥作用的唯一方式.

更新2

我认为最初的方法从来没有给我我需要的东西.因此实现了自定义指令.请参阅下面的答案.

Answer 1

我最终最终为它编写了自己的指令.我需要确保gridster可以看到对底层数据的每次更改,但与此同时,我不想在数据模型上编写自己的监视,并用指令替换你在gridster中通常执行的所有操作.隐藏所有这些.(这将涉及在指令本身内实施大部分ng-repeat .)

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

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
} 

有了这个,我可以添加一个gridster生成的视图:

<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控制视图中并从中移除.

编辑

这是一个插件,展示了该指令的略微修改版本:

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);
                });
            }
        };
    }
]);

Answer 2

如果你想要,你可以尝试为gridster滚动自己的包装器.昨晚我大部分时间都在度过,这有点小故障.gridster处理序列化的方式并不简单,等等.无论如何我偶然发现了这个项目,它的工作原理非常好.

https://github.com/ManifestWebDesign/angular-gridster

我找不到在线演示,所以我搞了一下:

http://plnkr.co/edit/r5cSY1USjtr2bSs7rvlC?p=preview