AngularJS : 지시어의 속성을 변경 토글

Question

내가 진행중인 프로젝트에서해야 할 일 목록에 각도 정렬을 통해 ui-sort를 적용하고 사용자가 작업을 편집 할 때 작업 토글을 얻으려고합니다. . 현재이 토글을 테스트하는 방법은 버튼을 사용하여 정렬을 켜거나 끕니다.

내 전략은 다음과 같습니다. 각도 지정을 사용하여 정렬을 사용하여 초기 템플릿을 생성합니다. 클릭하면 컨트롤러의 스코프 변수 ($ scope.sortingEnabled)를 수정하여 true와 false 사이를 전환합니다. 내 지시문 내에서 링크 함수에서 'sortingEnabled'를 설정하여 a에서 정렬 속성을 추가/삭제하는 시계를 가지고 있습니다.

다음은 지시어를 사용하기 전의 todo.html입니다. sortableOptions는 내부 레코드의 todos를 재정렬하기 위해 작성된 함수입니다.

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

}); 

이 코드 : 잭 - directives.js 내부 지침에 대한

<sortable></sortable> 

그리고 내 현재 초안 :

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

다음은 내 지시 후 todo.html의 코드는 다음과 Chrome 디버거의 소스 코드보기에서 작동하지만보기가 제대로 새로 고쳐지지 않습니다. 나는 scope 함수를 사용해 보았습니다. watch 함수 내에서 $ apply()하지만 $ digest가 이미 실행 중입니다. 나는 또한 $ compile을 시도했지만, 어떻게 작동하는지에 대한 나의 이해가 심하게 부족하여, 내가 기억하지 못하는 에러를 얻는다. 중요한 것을 놓치고 있거나 잘못 처리하고 있습니까? 내 이해가 낮기 때문에 나는 확신 할 수 없다. 나는 몇 주 동안 각도를 기울이고있다. 어떤 도움이라도 대단히 감사하겠습니다!

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

그래서 당신이해야 할 일을했을 모두가 jqueryui 정렬 설명서를 봐, 그리고 플러그인의 올바른 속성을 업데이트 다음 정렬 옵션을 변경할 때

Answer 1

각도 지시문을보고 지원합니다.

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