10

I'm using Angular JS and Angular UI (via a gem : angular-ui-rails) and today I'm stuck with module dependancies. If anyone has an idea !

I would like to add the sortable module ( https://github.com/angular-ui/ui-sortable ) on my app that looks like this example :

http://jsfiddle.net/g/hKYWr/

The thing is that I already have UI-bootstrap module loaded on it, so I try to do this :

on app.js :

 angular.module('ui', ['ui.bootstrap','ui.sortable']);

on controllers.js

 function dndCtrl($scope) {
     $scope.list = ["one", "two", "three", "four", "five", "six"];
 }

a sortable.js file loaded in the app. The order of js is :

 //= require jquery
 //= require jquery_ujs
 //= require underscore
 //= require angular.min
 //= require ./angular/controllers/app.js
 //= require_tree ./angular
 //= require_tree .

and so the sortable.js file is loaded after app.js and just before ui-bootstrap js file (in ./angular tree)

Then last : my html file with a simple list loop with angular :

<html ....... ng-app="ui">
 .....

<div ng-controller="dndCtrl">
    <ul ui-sortable ng-model="list">
        <li ng-repeat="item in list" class="item">{{item}}</li>
    </ul>
    <hr />
</div>

The loop's working well and UI bootstrap (Typeahead in my case too) but not sortable and console renders a

 TypeError: Object [object Object] has no method 'sortable'

What did I do wrong or miss ?

1 Answer 1

23

UI-sortable depends on jQuery UI. It doesn't look like you have included jQuery UI JavaScript file. Note that you can either include the whole jQuery UI library or create a custom build with just the sortable module.

Sign up to request clarification or add additional context in comments.

3 Comments

I use jquery-ui-rails gem (version 4.0.2)
ok. My mistake ! I forgot to declare the //= require jquery.ui.all in application.js! It's working well ! thanks a lot to notice it :)
Thanks, solved my problem. Here is the sortable demo in plunkr embed.plnkr.co/8s0jg3aBKDx2IIf6me83

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.