AngularJS - jQuery - ui-sortable g.sortable不是一个函数。

Question

我正在使用ui-sortable创建一个可拖动行的表格。

<tbody ui-sortable="sortableOptions" ng-model="model.list">
   <tr ng-repeat="item in model.list">
      <td>
          <div class="form-group">
              <input type="text" class="form-control test-input" ng-model="item.Country" ng-readonly="!isEditable">
          </div>
      </td>
      <td>
          <div class="form-group">
              <input type="text" class="form-control test-input" ng-model="item.Value" ng-readonly="!isEditable">
          </div>
      </td>
   </tr>

以下是控制器中的代码。

$scope.sortableOptions = {
            update: function(e, ui) {

                console.log(model.list);
            },
            stop: function(e, ui) {

                console.log(model.list);
            }
        };

我使用了require.js，并添加了依赖ui.sortable。

每当我打开带有表格的页面时，就会出现以下错误 -

angular.js:12520 TypeError: g.sortable不是一个函数     在w（http://localhost:90/bower_components/angular-ui-sortable/sortable.min.js:8:4649）     在x（http://localhost:90/bower_components/angular-ui-sortable/sortable.min.js:8:4721）     在link（http://localhost:90/bower_components/angular-ui-sortable/sortable.min.js:8:5003）     在http://localhost:90/bower_components/angular/angular.js:8835:44     在invokeLinkFn（http://localhost:90/bower_components/angular/angular.js:8841:9）     在nodeLinkFn（http://localhost:90/bower_components/angular/angular.js:8335:11）     在compositeLinkFn（http://localhost:90/bower_components/angular/angular.js:7731:13）     在nodeLinkFn（http://localhost:90/bower_components/angular/angular.js:8330:24）     在compositeLinkFn（http://localhost:90/bower_components/angular/angular.js:7731:13）     在compositeLinkFn（http://localhost:90/bower_components/angular/angular.js:7734:13）<tbody ui-sortable="sortableOptions" ng-model="model.list" class="ng-pristine ng-untouched ng-valid ng-isolate-scope">

请问您能帮忙解决吗？ 提前致谢

- Arjun Varrier

Answer 1

ui-sortable 依赖于 jQuery、jQuery UI 1.9+。在使用 ui-sortable 的 js 文件前，请确保您已经加载了这些依赖文件，并将 ui.sortable 注入到正确的模块中，例如：angular.module('myapp', ['ui.sortable']);

- othman.Da

---

我正在使用的jQuery版本是2.1，并且 ui.sortable 的注入也是正确的。 - Arjun Varrier

我是否还漏掉了什么？ - Arjun Varrier

你是否添加了jQuery UI？ - othman.Da

需要配置文件正在造成问题... 注入是正确的。 - Arjun Varrier

Answer 2

如果有人遇到同样的问题，但似乎所有东西都是正确的，比如：

1. jQuery is loaded.
2. angular-ui-sortable is being loaded correctly.
3. You've injected its dependency. 
   angular.module('myapp', ['ui.sortable']);
4. The code appears to be correct in the view

请确保在 sortable js 文件之前引入了 jquery 和 jquery-ui。我曾经遇到过同样的问题，经过长时间的头痛后，在这个讨论串中找到了解决方案。

- Naila Akbar

Answer 3

UI.Sortable指令的要求

AngularJS v1.2+

JQuery v3.1+
JQueryUI v1.12+

如果使用jQuery v1.x和v2.x，则添加UI.Sortable v0.14.x版本

- Vishal Vaghasiya