在AngularJS NG-重复的内容越来越糟糕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.
在角UI的 UI-JQ
指令读取文档,我得到的IM pression说的这个(检查小提琴)应该工作。但是,当我再翻看了一下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重复指令,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-重复
也凑了过来在自产自销指令的情况下。我试图推迟只要挂钩的jQuery插件,我可以( $ evalAsync
)和一致好评,并最终结束了使用 $超时
。这是的唯一的方式,我可以得到它的工作。
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重复的的指令本身。)
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.)
这是我有什么(并假设富是我模块的名称):
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
}
有了这个,我可以有一个gridster生成的视图,加入这样的:
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-重复指令观察到的集合中删除,他们将被自动添加和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.
修改
下面是一个普拉克展示这种指令的一个稍作修改的版本:
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-重复的内容越来越糟糕Gridster jQuery插件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!