我有一个AngularJS SPA,可将文章加载到视图中。有些文章提供了代码示例,我想使用highlight.js突出显示它。

在下面的示例中,我模拟了一个get请求,因为这是我将动态内容加载到实际应用中的方式。 $scope.test非常类似于我的实际应用可以返回的内容;一些常规的HTML要打印出来,其中包括代码示例。

我的问题:这似乎并没有奏效。

具体来说,什么都不会突出显示。在我看来,我好像缺少一个init或其他什么东西。

我也尝试过<div hljs/>具有相同(缺乏)的结果。没有控制台错误。

This answer提供了在模板中使用ng-model的解决方案。但是,我不在任何地方使用ng-model。

编辑:我对示例代码进行了一些更改,以进一步解释该问题。

这是我的应用程序(简体):

var app = angular.module('app', ['ngSanitize']);

app.controller('ctrl', ['$scope', '$http',
    function($scope, $http) {
        "use strict";
        $http.get('/echo/html').then(function successCallback(response) {
            $scope.title = 'Some Title';
            $scope.metaStuff = 'Written by Awesome MacFluffykins';
            $scope.articleBody = '<p>Here\'s an example of a simple SQL SELECT:</p><pre><code class="sql" highlight>SELECT * FROM table WHERE user = \'1\'</code></pre>';
        }, function errorCallback(response) {
            console.log("Error: %d %s", response.code, response.message);
        });
    }
]);


这是我的HTML:

<div ng-app="app" ng-controller="ctrl">
    <h2>{{ title }}</h2>
    <p><small>{{ metaStuff }}</small></p>
    <div ng-bind-html="articleBody"></div>
</div>


最后是jsFiddle

最佳答案

在我看来,最好将指令用于此类DOM操作。通过ng-model传递源代码(也可以使用其他属性),并在指令中运行HLJS。由于您正在使用异步方法将值提供给您的范围,因此需要使用$watch来捕获值,然后运行HLJS:

HTML:

<div highlight ng-model="test"></div>


指示:

.directive('highlight', [
    function () {
        return {
            replace: false,
            scope: {
                'ngModel': '='
            },
            link: function (scope, element, attributes) {
                scope.$watch('ngModel', function (newVal, oldVal) {
                    if (newVal !== oldVal) {
                        element.html(scope.ngModel);
                        var items = element[0].querySelectorAll('code,pre');
                        angular.forEach(items, function (item) {
                            hljs.highlightBlock(item);
                        });
                  }
                });
            }
        };
    }
]);


工作的JSFiddle:https://jsfiddle.net/1qy0j6qk/

关于javascript - AngularJS SPA中的Highlight.js不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34993041/

10-11 12:34