Question

我正在尝试在angular.js中编写一个简单的json pretty-printer指令。我有：

(function(_name) {
    function prettyJson() {
        return {
            restrict: 'E',
            template: '',
            link: function($scope, $element, $attr) {
                console.log($element.text());

                //$element.html(angular.toJson(angular.fromJson($element.text()), true));
            }
        };
    }

    angular
        .module('ourApp')
        .directive(_name, prettyJson);
})('prettyJson');

在我看来，我在做：

<pretty-json>{{ auth.get() }}</pretty-json>

问题是console.log($element.text())返回{{ auth.get() }}而不是函数调用auth.get()的角度编译结果。

如何使指令使用函数调用auth.get()的结果？

Answer 1

我将交换使用属性指令并使用$attr.$observe()函数来设置类似$watch的机制，每当属性的插值发生变化时，它将调用侦听器函数。

指令代码：

(function(_name) {
    function _directive() {
        return {
            restrict: 'A',
            link: function($scope, $element, $attr) {
                $attr.$observe(_name, function (json) {
                  $element.text(angular.toJson(angular.fromJson(json), true));
                });
            }
        };
    }

    angular
        .module('ourApp')
        .directive(_name, _directive);
})('prettyJson');

标记中的用法：

<pre pretty-json="{{ auth.get() }}"></pre>

查看我的Plunkr example。

Answer 2

您可以将要格式化的内容作为参数传递给指令。 e.g：

JS

(function(_name) {
    function prettyJson() {
        return {
            restrict: 'E',
            scope: {
                prettyJson: '='
            },
            template: '<pre>{{prettyJson | json}}</pre>',
        };
    }

    angular
        .module('ourApp')
        .directive(_name, prettyJson);
})('prettyJson');

HTML

<pretty-json="auth.get()"></pretty-json>

使用动态值的Angular指令

2 个答案: