Skip to content
This repository was archived by the owner on Sep 8, 2020. It is now read-only.

Commit 343f01d

Browse files
committed
docs(README): add docs about transcluded sorting
1 parent 84fa8b2 commit 343f01d

File tree

1 file changed

+25
-0
lines changed

1 file changed

+25
-0
lines changed

README.md

+25
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,30 @@ list A: stop
208208

209209
For more details about the events check the [jQueryUI API documentation](http://api.jqueryui.com/sortable/).
210210

211+
## Integrating with directives doing transclusion
212+
Wrap the transclusion directive element with the ui-sortable directive and set the `items` to target your `ng-repeat`ed elements. Following best practices, it is also highly recommended that you add a `track by` expression to your `ng-repeat`. [Angular Meterial example](http://codepen.io/thgreasi/pen/NbyLVK).
213+
214+
```js
215+
myAppModule.controller('MyController', function($scope) {
216+
$scope.items = ["One", "Two", "Three"];
217+
218+
$scope.sortableOptions = {
219+
items: '.sortable-item'
220+
// It is suggested to use the most specific cssselector you can,
221+
// after analyzing the DOM elements generated by the transclusion directive
222+
// eg: items: '> .transclusionLvl1 > .transclusionLvl2 > .sortable-item'
223+
};
224+
});
225+
```
226+
227+
```html
228+
<div ui-sortable="sortableOptions" ng-model="items">
229+
<a-transclusion-directive>
230+
<div ng-repeat="item in items" class="sortable-item">{{ item }}</div>
231+
</a-transclusion-directive>
232+
</div>
233+
```
234+
211235
## Examples
212236

213237
- [Simple Demo](http://codepen.io/thgreasi/pen/wzmvgw)
@@ -233,6 +257,7 @@ For more details about the events check the [jQueryUI API documentation](http://
233257
## Integrations
234258
- [firebase](http://codepen.io/thgreasi/pen/repEZg?editors=0010)
235259
- [ui.bootstrap.accordion](http://plnkr.co/edit/TGIeeEbbvJwpJ3WRqo2z?p=preview)
260+
- [Angular Meterial](http://codepen.io/thgreasi/pen/NbyLVK) (thanks yenoh2)
236261
- [Asynchronous loading jQuery+jQueryUI with crisbeto/angular-ui-sortable-loader](https://github.com/crisbeto/angular-ui-sortable-loader)
237262

238263
## Reporting Issues

0 commit comments

Comments
 (0)