Question

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

我的策略是这样的：使用angular指令生成带有排序的初始模板。添加一个按钮，单击该按钮可修改控制器中的范围变量（$ scope.sortingEnabled）以在true和false之间切换。在我的指令中，我在链接函数中的'sortingEnabled'上设置了一个监视器，用于添加/删除a。中的排序属性。

在我尝试使用指令之前，这是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几周。任何帮助将不胜感激！

Answer 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
  };
});

AngularJS：切换以修改指令中的属性

1 个答案: