AngularJS와 사용자 정의 체크 박스

Question

다음

에 NG-불확정 속성에 대한 지시문은 체크 박스에서 불확실한 상태를 처리하는 지침입니다 단순히 필요

<ul ng-repeat="item in data"> 
    <li> 
     <input type="checkbox" ng-indeterminate="{{item.displayed > 0 && item.displayed < item.total}}" ng-checked="item.displayed > 0" /> 
     {{item.name}} ({{item.displayed}}/{{item.total}}) 
    </li> 
</ul> 

일없이 NG-불확실한 표현을 쓸 수있는 방법이 있나요 e 이중 - 곱슬 표기법, 네이티브 - 체크 하나?

ng-indeterminate="item.displayed > 0 && item.displayed < item.total" 

내가 시도 :

.directive('ngIndeterminate', function($compile) { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attributes) { 
      attributes.$observe('ngIndeterminate', function(value) { 
       $(element).prop('indeterminate', $compile(value)(scope)); 
      }); 
     } 
    }; 
}) 

그러나 나는 다음과 같은 오류 얻을 :

Looking up elements via selectors is not supported by jqLite! 

Here is a fiddle 당신이 함께 플레이 할 수 있습니다.

Answer 1

우선 앞에 jQuery 을로드하면 element을 jQuery로 랩핑 할 필요가 없습니다. 따라서 지시문 안에 $(element)을 사용할 필요가없고 대신 element을 각도로 사용하면 자동으로 element을 jQuery 객체로 래핑합니다.

예를 들어 실제로는 jQuery가 필요하지 않기 때문에 아래에 제공된 대답은 jQuery에 전혀 의존하지 않습니다.

귀하의 질문에 대해 $watch 속성 값은 angular가 컴파일 된 속성 값을 자동으로 반환합니다. 그래서 당신과 다음 작품을 기대 : 직접 변경하는 속성 http://jsfiddle.net/d9rG7/5/

Answer 2

사용 scope.$eval 및 element.prop :

.directive('ngIndeterminate', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attributes) { 
      attributes.$observe('ngIndeterminate', function(value) { 
       element.prop('indeterminate', scope.$eval(value)); 
      }); 
     } 
    }; 
}); 

FIDDLE

---

다음

.directive('ngIndeterminate', function($compile) { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attributes) { 
      scope.$watch(attributes['ngIndeterminate'], function (value) { 
       element.prop('indeterminate', !!value); 
      }); 
     } 
    }; 
}); 

은 jsfiddle 작업입니다attributes.$observe을 사용하면 보간을 포함하는 속성 변경 (예 : {{}} ') 만 잡을 수 있습니다. "표현식"을 관찰하거나 볼 수있는 scope.$watch을 사용해야합니다. 그래서, @ 바이어스 대답이 더 정확하다고 생각합니다. @Chi_Row에 주목하는 Thx