突出显示.js在 AngularJS SPA 中不起作用
Highlight.js in AngularJS SPA doesn't work
我有一个AngularJS SPA,可以将文章加载到视图中。有些文章有代码示例,我想使用突出显示.js来突出显示它。
在下面的示例中,我模拟了一个 get 请求,因为这就是我在实际应用程序中加载动态内容的方式。$scope.test
与我的实际应用程序可以返回的内容非常相似;一些常规的HTML打印出来,其中包括代码示例。
我的问题是:它似乎真的不起作用。
具体来说,不会突出显示任何内容。在我看来,我似乎缺少一个 init 或其他东西......哈尔普?
我也尝试过<div hljs/>
相同的(缺乏)结果。没有控制台错误。
此答案提供了一种在模板中使用 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/
小提琴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);
}
);
};
}]);
相关文章:
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- 监视函数从服务返回不起作用,但作用域函数起作用
- 幻灯片滚动javascript不起作用
- 简单的javascript在Shopify中不起作用
- Recaptcha在IE7和IE8中不起作用
- Ember Data DS.Model's set函数不起作用
- JsFiddle上的鼠标事件不起作用
- 我的AngularJS表达式没有'不起作用
- 点击按钮输入不起作用
- 面向对象的Javascript代码在IE7中不起作用
- 分部隐藏在jquery中不起作用
- 在phonegap应用程序内部重定向不起作用
- Array.length似乎不起作用;console.log则显示其他情况
- $ionicplatform内的$scope不;不起作用
- 我的javascript for循环不起作用
- SPA异步调用在IE 11中不起作用
- TinyMCE在SPA中不起作用
- Javascript范围在角度SPA应用程序中不起作用
- 突出显示.js在 AngularJS SPA 中不起作用
- 带有淘汰SPA的HTML尝试使用组件,绑定不起作用