我有一个AngularJS SPA,可以将文章加载到视图中。有些文章有代码示例,我想使用highlight.js来突出显示它。
在下面的示例中,我模拟了一个获取请求,因为这是我在实际应用中加载动态内容的方式。 $scope.test
与我的实际应用程序返回的内容非常相似;打印出一些常规HTML,其中包括代码示例。
我的问题:它似乎无法正常工作。
具体来说,没有任何内容突出显示在我看来,我错过了一个init或者其他什么...... Halp?
我也尝试<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。
答案 0 :(得分:1)
小提琴 https://jsfiddle.net/vg75ux6v/
var app = angular.module('app', ['hljs', 'ngSanitize']);
app.controller('ctrl', ['$scope', '$http',
function($scope, $http) {
"use strict";
$http.get('/echo/html').then(function successCallback(response) {
$scope.test = '<h2>Here\'s some code:</h2><pre><code hljs class="sql">SELECT * FROM table WHERE user = \'1\'</code></pre>';
}, function errorCallback(response) {
console.log("Error: %d %s", response.code, response.message);
});
}
]).directive('compile', ['$compile', function ($compile) {
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
return scope.$eval(attrs.compile);
},
function(value) {
element.html(value);
$compile(element.contents())(scope);
}
);
};
}]);
答案 1 :(得分:1)
在我看来,最好使用像这样的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/