- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个将文章加载到 View 中的 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 .
最佳答案
在我看来,最好使用像这样的 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/
我正在看的是在另一个 React 微前端中有一个有角度的微前端,这是我们可以通过 single-spa 实现的吗 最佳答案 是的,这可以通过两种方式完成。这取决于您的应用程序使用的框架。 选项 1:跨
总结:如何在不使用繁重的 JS 框架的情况下处理 PWA 中的导航、历史记录和深度链接? 在领导团队将现有的购物网站从 Angular 1 SPA 转换为多页面应用程序 (MPA) PWA 时,我遇到
我正在尝试使用 Angular.js 和 Express.js 创建 Node.js 应用程序。 我正在做的是使用此代码将客户名称和地址添加到列表(随机)。 var mylist = new gene
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗?更新问题,以便 editing this post 可以用事实和引文来回答它。 . 已关闭 8 年前。 Improv
所以我在 Laravel 5.3 和 Vue 2 中开发一个网站/网络应用程序。SEO 很重要,所以我想在 Laravel + Blade 中保留网站的前端/可抓取部分,并且只保留一些不必要的小部分在
我设置了一个单页应用程序,它使用 Controller (用 PHP 编写)从 API 获取数据。到目前为止,我没有遇到任何问题,数据填充表,在选择表元素时它会使用新的 url 和部分数据(主要是 I
因此,我一直在尝试找出有关如何在 SPA 应用中处理授权(而不是身份验证)的最佳实践。 假设我有一个带有 api 后端的客户端 MVC(Angular、vuejs 等),我们如何管理应用程序的使用授权
SPA 的缺点当然是初始加载时间。 例如,我用 Durandal 创建了 AskACarPro.com。 它目前在加载时有一个“加载”屏幕。但我在想也许这是一个坏主意。它让我想起了一个全闪存网站——漂
我最近一直在阅读有关 SPA 以及它有多好的内容。 我想知道是否有人可以告诉我什么时候应该使用,或者什么时候不应该像常规 MVC 一样使用 SPA 最佳答案 MVC(Rails、MVC4)的工具更加成
基本设置:由Apache 2.4提供的Angular 1.5 SPA由REST api支持,Apache 2.4也提供了REST API。 我已经阅读了在服务器上更改了一些应用程序代码后可以使SPA更
在典型的单页应用程序(SPA,例如:React)中,整个代码包都提供给客户端。这包括应用程序的私有(private)组件,这些组件通常受到客户端授权机制的保护(例如,检查身份验证 token 是否已设
我想单独托管我的 应用程序和 网站 .层次结构如下: example.com - 网站托管在 DigitalOcean example.com/* - SPA 托管在 Firebase Hosting
我正在寻找可重复使用的解决方案,以解决用户执行的某些操作在完成之前可能需要用户进一步确认的问题。 我正在使用 React 前端和 WebAPI 后端开发应用程序。 假设用户正在发起资金转账,并假设我们
我有一个像这样的网站 http://domain/?key=32dxzQW 其中 key 是从每个用户的其他站点自动生成的 我需要知道的是访问量最大的部分,所以我正在考虑使用 GA,并且由于我的网页是
我真的很喜欢GunDb的概念,并且了解如何单独在客户端编写。 现在我使用来自 Github 的 Create-React-App。 有人知道 GunDb 的服务器端吗? 和一个 View [React
假设 ABC 公司有两个团队开发两个 SPA 应用程序:app1、app2 每个应用程序都有自己的 index.html 和关联的静态资源,例如: build / 索引.html 主.js 这是从:h
我一直在使用 AngularJS 开发 SPA,并将用户数据存储在 Angular Value 服务中,但我对此感到不舒服,主要是因为 Angular Value 不在浏览器选项卡之间共享。因此,如果
假设 ABC 公司有两个团队开发两个 SPA 应用程序:app1、app2 每个应用程序都有自己的 index.html 和关联的静态资源,例如: build / 索引.html 主.js 这是从:h
因此,我使用 Gorilla/Mux 在 Go 中设置了我的 SPA,但我想在不同的路由上运行它,这样我就可以将我的两个 Kubernetes 服务连接在一起(2 个不同的 SPA)。 难道我必须将我
我正在创建一个单页应用程序。我试图在 sql 中选择一个表并在字段中搜索特定日期 Date_Due,然后确保另一个字段 Date_Complete 为空。我试图弄清楚如何让隐藏字段填充查询中的 cfp
我是一名优秀的程序员,十分优秀!