Angularjs UI路由器问题
[英]Angularjs UI-Router Issue
问题描述
So here I have my index.html and app.js. 
所以这里有我的index.html和app.js。 I'm trying to use prismjs to show a code block on my view .If you run the snippet below me. 我正在尝试使用pyramidjs在我的视图上显示代码块。如果您运行我下面的代码段。 This is how I like my app to do. 这就是我喜欢我的应用程序的方式。 But in my real app I'd like to not include a tag that contain my secondview.html. 但在我的真实应用中，我不想包含包含secondview.html的标签。 I would like it to be in its own separate file. 我希望它在自己的单独文件中。 But when I do that the prism css file won't work inside the ui-view. 但是，当我这样做时，棱镜css文件在ui视图内将无法工作。
Is there any configuration I would have to do? 有什么我需要做的配置吗？ I believe it has something to do with the ng-binding. 我相信这与ng-binding有关。 Here is what it looks like inside the ui-view. 这是用户界面视图中的外观。 I wish I can provide another link to show you what it looks like outside the ui-view but I don't have enough reputation to post more than 2 links...lol But it just pretty much has all of the classes that the prism js injected into the elements which the prism.css will render. 我希望我可以提供另一个链接来向您展示在ui视图之外的外观，但是我没有足够的声誉来发布两个以上的链接...大声笑，但是它几乎具有所有棱镜的类js注入了prism.css将呈现的元素。
This is what it looks like when the view is in its own separate file(Not Working) 这是视图在其自己的单独文件中时的外观（不起作用）
The Code below me has the secondview.html inside the index.html(Works) 我下面的代码在index.html中包含secondview.html（Works）
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>
1 个解决方案
解决方案1
1 已采纳 2016-05-11 08:45:54
Need a directive : 需要一个directive ：
.directive('ngPrism', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
Prism.highlightElement(element.find('code')[0]);
}
}
})
Then wrap your code html by <div ng-prism> ... </div> : 然后用<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>
Then it worked. 然后它起作用了。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.