0

私が取り組んでいるプロジェクトでは、To Do リストに Angular を介して ui-sort を適用しており、ユーザーがタスクを編集しているときにトグルを機能させようとしています。このトグルをテストする現在の方法は、ボタンを使用して並べ替えのオンとオフを切り替えることです。

私の戦略は次のとおりです。角度ディレクティブを使用して、ソートをオンにして初期テンプレートを生成します。クリックするとコントローラー ($scope.sortingEnabled) のスコープ変数を変更して true と false を切り替えるボタンを追加します。私のディレクティブ内では、リンク関数で「sortingEnabled」に設定されたウォッチがあり、.

ディレクティブを使用する前の todo.html は次のとおりです。 sortableOptions は、内部レコードの todo を並べ替えるために作成された関数です。

<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 のデバッガーのソース コード ビューで機能しますが、ビューが正しく更新されません。ウォッチ関数内で scope.$apply() を試しましたが、 $digest already running エラーが発生します。私も $compile を試しましたが、それがどのように機能するかについての私の理解が非常に不足しているため、覚えていないエラーが発生します。何か重要なことを見逃しているのでしょうか、それとも間違ったことをしていますか? 私は数週間Angularに傾倒しているため、私の理解が低いため、確信が持てません。どんな助けでも大歓迎です！

4

1 に答える 1

1

angular ディレクティブは、並べ替え可能なオプションが変更されたときの監視をサポートしています。

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

そのため、jqueryui のソート可能なドキュメントを見て、プラグインの正しいプロパティを更新するだけで済みました。

プランカー: 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 に答える