0

在我正在处理的项目中，我正在通过 Angular 在待办事项列表上应用 ui-sort，并尝试在用户编辑任务时进行切换。我当前测试此切换的方法是使用按钮来打开和关闭排序。

我的策略是这样的：使用一个角度指令来生成一个带有排序的初始模板。添加一个按钮，单击该按钮可修改控制器中的范围变量 ($scope.sortingEnabled) 以在 true 和 false 之间切换。在我的指令中，我在链接函数中的“sortingEnabled”上设置了一个监视，以从 .

这是我尝试使用指令之前的 in todo.html： sortableOptions 是一个函数，用于对内部记录上的 todos 重新排序。

<ul class="unstyled" ng-model="todos" ui-sortable="sortableOptions">
<!-- list items here via ng-repeat -->
</ul>

以下是我的指令后 todo.html 中的代码：

<sortable></sortable>

我目前在 todo-directives.js 中的指令草案：

app.directive('sortable', function() {

    var innerHtml = '<li ng-repeat="todo in todos" class="item">' +
        '<span ng-model="todo.name" >{{todo.name}}</span> ' +
        '</li>';

    var link = function (scope, element, attrs) {

        scope.$watch('sortingEnabled', function() {
            if(scope.sortingEnabled === true) {
                element.contents().attr("ui-sortable", "sortableOptions");
                //needed else ui-sortable added as a class for <ul> initially for
                //some reason
                element.contents().removeClass("ui-sortable");
            }
            else {
                element.contents().removeAttr("ui-sortable");
                //needed else ui-sortable added as a class for <ul> initially for
                //some reason
                element.contents().removeClass("ui-sortable");
            }
        });


    };
    return {
        restrict: 'E',
        transclude: true,
        template: '<ul class="unstyled" ng-model="todos" ui-sortable="sortableOptions"  ng-transclude>' + innerHtml + '</ul>',
        link: link
    };

});

此代码在 Chrome 调试器的源代码视图中有效，但视图无法正确刷新。我在 watch 函数中尝试了 scope.$apply() ，但是得到了一个 $digest 已经运行的错误。我也尝试过 $compile，但我对它的工作原理非常缺乏了解，所以我得到了一些我不记得的错误。我是否遗漏了一些重要的东西，或者做错了什么？我不确定，因为我的理解力很低，因为我已经学习 Angular 几个星期了。任何帮助将不胜感激！

4

1 回答 1

1

angular 指令支持观察可排序选项何时发生变化：

scope.$watch(attrs.uiSortable, function(newVal, oldVal){

因此，您所要做的就是查看 jqueryui 可排序文档，并更新插件上的正确属性。

Plunker：http ://plnkr.co/edit/D6VavCW1BmWSSXhK5qk7?p=preview

html

<ul ui-sortable="sortableOptions" ng-model="items">
   <li ng-repeat="item in items">{{ item }}</li>
 </ul>
<button ng-click="sortableOptions.disabled = !sortableOptions.disabled">Is Disabled: {{sortableOptions.disabled}}</button>

JS

app.controller('MainCtrl', function($scope) {
  $scope.items = ["One", "Two", "Three"];

  $scope.sortableOptions = {
    disabled: true
  };
});
于 2013-07-17T19:00:35.953 回答