Question

我正在尝试使用AngularJS和NG-Table，但无法解决以下问题：

我正在NG-Table中的Django应用程序中显示一组User对象。该模型的一个属性是一个布尔值，指示对象是否处于活动状态。我想要使用AngularJS指令从Font Awesome集中显示一个字形，而不是取代true / false。

从各种样本中我得到了以下内容。

模块：

var main = angular.module("main", ["ngTable"]);

检索要在表格中显示的对象：

main.factory('User', function ($http) {
    return {
        async: function() {
            var promise = $http.get('api/v1/users').then(function (response) {
                return response.data["objects"];
            });
            // Return the promise to the controller
            return promise;
        }
    };
});

控制器和将布尔值转换为字形的指令：

main.controller("UsersCtrl", function ($scope, $filter, ngTableParams, User) {
    User.async().then(function(data) {
        $scope.tableParams = new ngTableParams({
            page: 1,
            count: 4,
            sorting: {
                name: 'asc'
            }
        },{
            total: data.length, // length of data
            getData: function ($defer, params) {
                // use build-in angular filter
                var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
                $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
            }
        });
    });
}).directive('boolean', function () {
    return {
        restrict: 'E',
        link: function (scope, elem, attrs) {
            var userObject = scope.userObject;
            if (userObject["active"]) {
                console.log("active");
                console.log(elem);
                elem.html = "<i class='fa fa-check text-success fa-lg'></i>";
            } else {
                console.log("not active");
                console.log(elem);
                elem.html = "<i class='fa fa-times text-danger fa-lg'></i>";
            }
        }
    }
});

然后在我的HTML模板中：

    <table ng-table="tableParams" class="table">
        <tr ng-repeat="propertyObject in $data">
            <td data-title="'Name'" sortable="'name'">
                [[ userObject.name ]]
            </td>
            <td>
                <boolean>[[ userObject.active ]]</boolean>
            </td>
        </tr>
    </table>

由于与Django模板约定的冲突，我不得不将Angular的默认双花括号更改为方括号。

该表显示正常，但对于我的boolean directive，它无法显示字形，仍然只显示真或假。通过登录到控制台，我可以检查实际对象，它们看起来是正确的。我显然错过了一些东西，但我会很感激有什么帮助...

Answer 1

在尝试操作元素html之前，您需要让ng-repeat完成它的摘要。有几种方法可以使用attrs.$observe或$timeout。

基本上发生的事情是你的代码在呈现元素之前触发

只需使用ng-class，您就不需要指令了

<table ng-table="tableParams" class="table">
    <tr ng-repeat="propertyObject in $data">
        <td data-title="'Name'" sortable="'name'">
            [[ userObject.name ]]
        </td>
        <td>
            <i class='fa fa-times fa-lg' 
             ng-class="{'text-danger':!userObject.active,'text-success':userObject.active}">
            </i>
        </td>
    </tr>
</table>

或者你真的可以简化指令，只使用<i>

将template作为ng-class返回

如何创建受限制的指令？

1 个答案: