私は最終的にそれに対する独自のディレクティブを書くことになりました。基になるデータへのすべての変更が 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 ディレクティブによって監視されるコレクションにアイテムが追加または削除されるたびに、グリッドスター制御ビューからアイテムが自動的に追加および削除されます。
編集
以下は、このディレクティブのわずかに変更されたバージョンを示す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);
});
}
};
}
]);