AngularJS：切換修改指令中的屬性

Question

在我正在處理的項目中，我正在通過Angular在待辦事項列表中應用ui-sort，並試圖在用戶正在編輯任務時使用切換功能。我目前測試這個切換的方法是使用一個按鈕來切換開關的排序。

我的策略是這樣的： 使用一個角度指令生成一個初始模板，並進行排序。 添加一個按鈕，單擊該按鈕可修改控制器中的範圍變量（$ scope.sortingEnabled）以在真和假之間切換。 在我的指令裏面，我有一個關於'sortingEnabled'的鏈表函數，用於添加/刪除排序屬性。

以下是我在嘗試使用指令之前的todo.html： sortableOptions是一個函數，用於重新排序內部記錄中的待辦事項。

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

以下是todo.html代碼我的指令後：爲待辦事項，directives.js內部指令

<sortable></sortable> 

而我目前的草案：

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

角指令支持看，當排序選項改變：

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