所以这里我有我的 index.html 和 app.js。我正在尝试使用 prismjs 在我的 View 中显示一个代码块。如果你运行下面的代码片段。这就是我喜欢我的应用程序的方式。但在我的真实应用程序中，我不想包含包含我的 secondview.html 的标签。我希望它在自己单独的文件中。但是当我这样做时，prism css 文件将无法在 ui-view 中工作。
有什么我必须做的配置吗？我相信它与 ng-binding 有关。 Here是它在 ui View 中的样子。我希望我可以提供另一个链接来向您展示它在 ui-view 之外的样子，但我没有足够的声誉来发布超过 2 个链接......大声笑但它几乎包含棱镜的所有类js 注入(inject)到 prism.css 将呈现的元素中。
This is what it looks like when the view is in its own separate file(Not Working)
我下面的代码在 index.html 中有 secondview.html(有效)
myApp = angular.module("myApp", ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home',{
url: '/',
templateUrl: 'secondview.html'
});
});<html ng-app="myApp">
<head>
<!-- <meta charset="utf-8" />-->
<title>AngularJS Prism</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/themes/prism.min.css">
</head>
<body style="background-color: grey">
<h1>Firsts View(Not Inside ui-view)</h1>
<pre>
<code class="language-html">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
<div class="container">
<p>Hello There this is a short test</p>
</div>
<script src="javascripts/app.js"></script>
</body>
</html>
</code>
</pre>
<script type="text/ng-template" id="secondview.html">
<h1>Second View(Inside ui-view)</h1>
<pre>
<code class="language-html">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
<div class="container">
<p>Hello There this is a short test</p>
</div>
<script src="javascripts/app.js"></script>
</body>
</html>
</code>
</pre>
</script>
<div ui-view></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.4.1/prism.min.js"></script>
<script src="app.js"></script>
</body>
</html>最佳答案
需要 directive :
.directive('ngPrism', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
Prism.highlightElement(element.find('code')[0]);
}
}
})
然后用<div ng-prism> ... </div>包装你的代码html :
<div ng-prism>
<pre>
<code class="language-html">
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
<div class="container">
<p>Hello There this is a short test</p>
</div>
<script src="javascripts/app.js"></script>
</body>
</html>
</code>
</pre>
</div>
然后就成功了。
关于html - Angularjs UI-路由器问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37155174/