如何创建受限指令？答案

【问题标题】：How to create a restricted directive?如何创建受限指令？
【发布时间】：2013-12-12 01:43:49
【问题描述】：

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

我在 NG-Table 中显示来自 Django 应用程序的用户对象集合。模型的属性之一是指示对象是否处于活动状态的布尔值。我想使用 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，它无法显示字形，仍然只显示真或假。通过登录到控制台，我可以检查实际对象并且它们看起来是正确的。我显然遗漏了一些东西，但希望能提供任何帮助......

【问题讨论】：

标签： javascript django angularjs angularjs-directive

【解决方案1】：

您遇到的问题是，您需要让ng-repeat 在尝试操作元素 html 之前完成它的摘要。有几种方法可以做到这一点，使用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>

或者您可以真正简化指令，使用ng-class 仅将<i> 作为template 返回

【讨论】：

完美运行。谢谢！