AngularJS：過濾器數組

Question

我為帶有數據的表創建了一個元素指令。 該表使用ng-repeat呈現所有行/列。

我為element指令創建了一個屬性指令。 目的是獲取您不希望包含在表中的列。 完整指令可能如下所示：

<extended-table exclude="columnone, columntwo"></extended-table>

該表解釋為：

<table>
    <tr>
        <th ng-repeat="column in columns">
        {{column}}
        </th>
    </tr>
    <tr ng-repeat="row in data | startFrom:currentRow">
        <td ng-repeat="column in columns">
            {{row[column]}}
        </td>
    </tr>
</table>

在ng-repeat ，我希望它忽略exclude中的值，但是我對從這里去哪里有些迷茫。

app.directive('exclude', function () {
    return function (scope, element, attrs) {

        var params = attrs.exclude.split(',');

        for (var i = 0; i < params.length; i++) {
            params[i] = params[i].trim();
        }

        scope.exclude = params;
    };
});

如果該列包含在$scope.exclude數組中，如何使ng-repeat忽略標題和行的列？

app.filter('startFrom', function () {
    return function (input, start) {
        start = +start;
        return input.slice(start);
    };
});

Answer 1

我的建議是改為通過extended-table指令讀取exclude屬性，而不是創建自定義指令來執行此操作。

這是一些不完整的代碼，顯示了如何完成此操作：

myModule.directive('extended-table', function() {
    return {
...
      scope: {
        'exclude': '@' // This says to load the attribute 'exclude' into a scope property of the same name.
      }
...
    // In your link functions you could process the scope.exclude property as you wish.
    };
  });

可以在The Hitchhikers Directive Guide中找到更多信息：

@ – binds the value of parent scope property (which always a string) to the local scope. So the value you want to pass in should be wrapped in {{}}. Remember `a` in braces.
= – binds parent scope property directly which will be evaluated before being passed in.
& – binds an expression or method which will be executed in the context of the scope it belongs.

這種方法的最大優點是您不會創建兩個相互依賴的指令。

注意：

使用@進行綁定時，請記住以{{}}表示法傳遞屬性：

    <myDirective myDirectiveAttribute="{{someProperty}}"/>