javascript - 在 Angular View 中执行回调？

Question

我有一个针对表的通用指令，它根据某些属性输出一些值，例如:

<tr ng-repeat="item in table.data">
    <td ng-repeat="column in table.columns">
        <i ng-if="column.type === 'icon'" class="fa fa-{{column.icon}} fa-2x"></i>
        {{item[column.key]}}
    </td>
</tr>

数据结构可能如下所示:

$scope.table = {
    columns: [
        {key: 'flag', type: 'icon', icon: function (item) { return 'flag'; }},
        {key: 'acronym', type: 'desc', title: 'Acronym'},
    ],
    data: {}
};

当指令循环遍历表数据中的每个项目时，它会创建一个新的表行。每行都遵循基于列结构的规则。在某些情况下，存在一个与“箭头”相同的图标，并且 icon 将被设置为 arrow。然而，有时图标取决于表item数据中的值。所以我想在 View 中执行 icon 作为回调函数。

当我运行类似 {{column.icon(item)}} 的东西时，我收到错误。是否有办法从 View 执行此回调？

Answer 1

column.icon 确实是您所有列的函数吗？如果有柱子没有这个功能，就会炸掉。确保在整个过程中添加图标方法。

$scope.table = {
    columns: [
        {key: 'flag', type: 'icon', icon: function (item) { return 'flag'; }},
        {key: 'acronym', type: 'desc', title: 'Acronym', icon: function (item) { return 'flag'; }},
    ],
    data: {}
};

或者在调用之前首先检查 View 中是否存在图标。

{{column.icon && column.icon(item)}}