AngularJS Brauch für ein ng-unbestimmtes Attribut Richtlinie über Kontrollkästchen

Question

Hier ist eine Richtlinie, die den unbestimmten Zustand auf Kontrollkästchen Griffe:

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

Dann wird zum Beispiel mit diesen Daten:

$scope.data = [ 
    {name: 'foo', displayed: 2, total: 4}, 
    {name: 'bar', displayed: 3, total: 3} 
]; 

würden Sie einfach brauchen:

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

Gibt es eine Möglichkeit, den ng-unbestimmten Ausdruck ohne th zu schreiben Die Doppel-locked Notation, genau wie die native ng-checked?

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

Ich habe versucht:

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

Aber ich erhalte den folgenden Fehler:

Looking up elements via selectors is not supported by jqLite! 

Here is a fiddle Sie können mit spielen.

Answer 1

Zunächst einmal müssen Sie element in jQuery nicht umbrechen, wenn Sie jQuery vor eckig laden. Sie müssten also nie $(element) in Ihren Anweisungen verwenden und stattdessen element direkt verwenden, da eckig automatisch element als jQuery-Objekt umschließt.

Für Ihr Beispiel benötigen Sie eigentlich nicht einmal jQuery, so dass die unten angegebene Antwort nicht auf jQuery angewiesen ist.

Was Ihre Frage betrifft, können Sie $watch Ihre Attributwerte, angular automatisch den kompilierten Attributwert zurückgeben. So sind die folgenden Werke wie man erwarten würde:

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

Hier ist ein Arbeits jsfiddle: http://jsfiddle.net/d9rG7/5/

Answer 2

Verwenden scope.$eval und element.prop direkt Attribut zu ändern:

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

FIDDLE

---

Mit attributes.$observe können Sie nur Attributänderungen abfangen, die eine Interpolation enthalten (d. H. {{}}). Sie sollten scope.$watch verwenden, die einen "Ausdruck" beobachten/beobachten können. So ist @Beyers Antwort mehr richtig, denke ich. Thx für noting @Chi_Row