在requireJS中使用google-code-prettify

Question

我的RequireJS是

requirejs.config({
    appDir:"/static",
    paths:{
        'jquery' : ["../bower_components/jquery/dist/jquery.min"],
        'angular': ["../bower_components/angular/angular"],
        'domReady': ["../bower_components/requirejs-domready/domReady"],
        "prettify": "/static/bower_components/google-code-prettify/src/prettify"
    },
    shim:{
        'angular':{
            "exports":"angular",
            deps: ["jquery"]
        }
    }
})

require(["jquery", "angular", "domReady", "prettify"],
    function($, angular, domReady, prettify){
    angular.module("docpage", ["desktop"])
        .controller("docController", function($rootScope){
            $rootScope.dataReady = function(){
                prettyPrint()
            }
        })
    domReady(function(){
        angular.bootstrap($("#doc"), ['docpage'])
        angular.bootstrap($("#news"), ['desktop'])
    })
})

我配置为https://github.com/tcollard/google-code-prettify所说的内容，但结果不正确，代码突出显示失败。 我寻求帮助，如何配置具有代码突出显示的requireJS？

Answer 1

当您应该使用AMD模块code.innerHTML = prettify.prettyPrintOne(code.innerHTML);时，您尝试使用全局上下文prettyPrint() 。 code.innerHTML = prettify.prettyPrintOne(code.innerHTML);

Answer 2

JS：

.controller("codeController", function($scope) {
    $scope.init = function(code){
        $scope.codedom = code
    }
})
.directive('prettyprint', function() {
    return {
        restrict: 'C',
        link: function postLink(scope, element, attrs) {
            element.html(prettyPrintOne(scope.codedom.content
                    .replace(/&/g, "&")
                    .replace(/\"/g, """)
                    .replace(/</g, "&lt;")
                    .replace(/>/g, "&gt;")
                    .replace(/ /g, "&nbsp;")
                    .replace(/\'/g, "&#39;")
                    .replace(/\n/g, "<br>"),
                scope.codedom.meta.lang.toLowerCase()))
        }
    }
})

HTML：

<div class="section sec-editable" ng-controller="codeController" ng-init="init(code)">
    <span>{{code.meta.lang}}</span>
    <pre class="prettyprint">{{code.content}}</pre>
</div