Question

我创建了一个指令来向我的表中添加类过滤元素。

app.directive('tableFilter', function () {
return {
    link: function (scope, element, attrs) {
        element.html(attrs.text + ' <i class="fa fa-unsorted"></i>');
        icon = element.children();


        scope.$watch('reverse', function (oldVal, val) {
            console.log(icon);
            if (angular.isDefined(oldVal)) {
                console.log(val);
                if (val) {
                    icon.addClass('fa-sort-asc');
                    icon.removeClass('fa-sort-desc');
                } else {
                    icon.removeClass('fa-sort-asc');
                    icon.addClass('fa-sort-desc');
                }
            }
        });
    }
}
});

我有2个使用此指令的地方。 HTML如下。

<tr>
    <th table-filter ng-click="tableFilter = 'name'; reverse=!reverse" text="Name"></th>
    <th table-filter ng-click="tableFilter = 'created'; reverse=!reverse" text="Date"></th>
</tr>

如果我点击该类，将添加和删除该类，但仅限于其中text =＆＃34; Date＆＃34;。一切顺利，除了指令只在最后一个添加或删除类。

这可能与element.children（）？

有关

希望你能帮助我。

提前致谢！

Answer 1

这是因为icon = ...。

以这种方式定义，使icon成为全局，因此每次致电icon = element.children()时，icon都会更新该元素的子项。

你应该把它变成一个局部变量，如下所示：

var icon = ...;

<子> 的＆LT;乐趣扰流＆GT;
与您的问题没有直接关系，但您的实施仍存在一些问题例如： -
1. $watch()回调的论点被反转（提到Sunil D），即newVal来自oldVal。
2.点击th后，所有图标都会更新（这对用户来说没有多大意义，因为他们不知道桌子按哪个列排序）。
的＆LT; /乐趣扰流＆GT;

<子> 的＆LT;主要芬扰流＆GT;
的 Demo implementation 即可。
（注意：让table-filter等可重用组件与其父组件共享scoe并不是一个好主意。它引入了紧耦合。您应该使用隔离范围并创建2- tableFilter和reverse的数据绑定方式。但这是另一个故事......）的＆LT; /主要芬扰流＆GT;

Angular指令仅在一个指令上更新类

1 个答案: