3

angularjs アプリに prettyprint プラグインを使用しようとしています。

しかし、それを機能させることはできません。簡単なディレクティブを作成してメソッド prettyPrint() を呼び出しましたが、コードがフォーマットされていません。

フィドル: http://jsfiddle.net/Tropicalista/yAv4f/2/

App.directive('test', function() {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
        $(element).prettyPrint()
    }
};
});
4

5 に答える 5

6

私はあなたのコードを修正し、ここで更新します: http://jsfiddle.net/yAv4f/6/

html:

<div ng-app="Knob" ng-controller="myCtrl">
   <pre class="prettyprint linemus"></pre>
   <pre class="prettyprint linemus">&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;/html&gt;</pre>
</div>

JavaScript:

var App = angular.module('Knob', []);
App.controller('myCtrl', function($scope) {
    $scope.dom = '&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;/html&gt;'
})

App.directive('prettyprint', function() {
    return {
        restrict: 'C',
        link: function postLink(scope, element, attrs) {
              element.html(prettyPrintOne(scope.dom));
        }
    };
});

基本的に、ファイルprettify.jsを使用して prettify() 関数の実行を制御する必要があります。prettyPrintOne() を使用すると、特定の html テキストで実行できます。

prettify stlyle のように、ディレクティブの使用を簡素化するために、クラスを「C」に制限し、ディレクティブ名を「prettyprint」に変更することをお勧めします。

于 2013-09-22T12:00:33.553 に答える
6

以前の回答を拡張し、モデルの変更にリアルタイムで応答する作業ディレクティブを使用して jsfiddle を作成しました。

http://jsfiddle.net/smithkl42/cwrgLd0L/27/

HTML:

<div ng-app="prettifyTest" ng-controller="myCtrl">
    <div>       
        <input type="text" ng-model="organization.message" />
    </div>
    <prettify target="organization"><pre><code class="prettyprint">console.log('{{target.message}}');
            </code>
        </pre>
    </prettify>
</div>

JS:

var App = angular.module('prettifyTest', []);
App.controller('myCtrl', function ($scope) {
    $scope.organization = {
        message: 'Hello, world!'
    };
});

App.directive('prettify', ['$compile', '$timeout', function ($compile, $timeout) {
    return {
        restrict: 'E',
        scope: {
            target: '='
        },
        link: function (scope, element, attrs) {
            var template = element.html();
            var templateFn = $compile(template);
            var update = function(){
                $timeout(function () {
                    var compiled = templateFn(scope).html();
                    var prettified = prettyPrintOne(compiled);
                    element.html(prettified);
                }, 0);
            }
            scope.$watch('target', function () {
                update();
            }, true);
            update();
        }
    };
}]);

h/t から @DanielSchaffer (テンプレートは常にディレクティブの古いスコープ値でコンパイルされるを参照)。

于 2014-12-16T22:08:14.307 に答える
1

@carlosmantilla によるディレクティブに少し追加したいと思います

スコープ変数を作成せずに同じことを達成できます。この修正をgithubに追加しました

これは適切に動作するはずです。

http://jsfiddle.net/yAv4f/143/

var App = angular.module('Knob', []);
App.controller('myCtrl', function($scope) {
    $scope.text = "function f1(){int a;}";
})

function replaceText(str)
{
    var str1 = String(str);
    return str1.replace(/\n/g,"<br/>");
}

app.directive('prettyprint', function() {
    return {
        restrict: 'C',
        link: function postLink(scope, element, attrs) {
              element.html(prettyPrintOne(replaceText(element.html()),'',true));
        }
    };
});
于 2014-03-19T17:16:04.243 に答える
1

Angular には、JSON 用にこのフィルターが既に組み込まれています。

<pre>
  {{data | json}}
</pre>

独自のディレクティブを作成する場合は、JSON オブジェクトを直接使用できます。

app.filter('prettyJSON', function () {
    function syntaxHighlight(json) {
      return JSON ? JSON.stringify(json, null, '  ') : 'your browser doesnt support JSON so cant pretty print';
    }
    return syntaxHighlight;
});

マークアップあり

  <pre>
    {{data | prettyJSON}}
  </pre>
于 2015-04-12T07:16:31.853 に答える