使用动态值的Angular指令

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示例 。

Answer 2

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

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>