AngularJS 自定义指令，用于复选框上的 ng-indeterminate 属性

Question

这是一个处理复选框不确定状态的指令：

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

然后，以这些数据为例：

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

你只需要：

<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-indeterminate 表达式，就像原生的 ng-checked 表达式一样？

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 before angular，你不需要在 jQuery 中包装 element。因此，您将永远不需要在指令中使用 $(element)，而是可以直接使用 element，因为 Angular 会自动将 element 包装为 jQuery 对象。

对于您的示例，您实际上甚至不需要 jQuery，因此下面提供的答案根本不依赖 jQuery。

至于你的问题，你可以$watch你的属性值，angular会自动返回编译后的属性值。因此，以下工作如您所料：

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

这是一个有效的jsfiddle：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

---

通过使用attributes.$observe，您只能捕获包含插值的属性更改（即{{}}）。您应该使用可以观察/观看“表达式”的scope.$watch。所以，我认为@Beyers 的回答更正确。感谢@Chi_Row