我正在尝试将Gridster与 AngularJS 集成，但还没有取得太大的成功。
阅读有关 Angular UIui-jq指令的文档，我觉得这个（检查小提琴）应该可以工作。但是当我用 Chrome 的调试器进一步观察时，结果发现在这一行上，它根本没有找到任何孩子。
我怀疑在 ng-repeat 指令的某个地方，AngularJS 决定删除将重复的部分，我明白为什么，但这并不能解决我的问题。我欢迎任何可以帮助我走得更远的线索。
我开始把它变成一个指令，希望它能改善事情。但是，嵌套ng-repeat指令也会妨碍本地指令。我尝试尽可能推迟连接 jQuery 插件（$evalAsync）等，最终使用$timeout. 这是我可以让它工作的唯一方法。
我认为最初的方法永远不会给我我需要的东西。所以实现了一个自定义指令。请看下面我的回答。
我最终最终为它编写了自己的指令。我需要确保 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 控制的视图中添加和删除。
编辑
这是一个演示该指令的略微修改版本的plunk ：
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);
});
}
};
}
]);
如果你愿意，你可以尝试为 gridster 滚动你自己的包装器。我昨晚大部分时间都度过了，这有点小故障。gridster 处理序列化的方式并不简单，等等。无论如何，我偶然发现了这个项目，它工作得非常好。
https://github.com/ManifestWebDesign/angular-gridster
我找不到在线演示，所以我做了一下：
这将在下一个版本中修复
https://github.com/angular-ui/angular-ui/pull/347
一旦我弄清楚为什么愚蠢的单元测试不会通过，新的 deferred 属性就会解决这个问题。
在研究 Angular 中的 Gridster 实现时遇到了它和这个问题。