Angularjs UI-路由器问题答案

【问题标题】：Angularjs UI-Router IssueAngularjs UI-路由器问题
【发布时间】：2023-03-30 10:23:01
【问题描述】：

所以这里有我的 index.html 和 app.js。我正在尝试使用 prismjs 在我的视图上显示代码块。如果您在我下面运行 sn-p。这就是我喜欢我的应用程序的方式。但在我的真实应用程序中，我不想包含包含我的 secondview.html 的标签。我希望它在自己的单独文件中。但是当我这样做时，prism css 文件将无法在 ui-view 中工作。

有什么我需要做的配置吗？我相信它与 ng-binding 有关。Here 是它在 ui-view 中的样子。我希望我可以提供另一个链接来向您展示它在 ui-view 之外的样子，但我没有足够的声誉来发布超过 2 个链接......哈哈但它几乎拥有棱镜的所有类js 注入到 prism.css 将渲染的元素中。

This is what it looks like when the view is in its own separate file(Not Working)

我下面的代码在 index.html(Works) 中有 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">
&lt;html>
  &lt;head>
    &lt;title>Test&lt;/title>
    &lt;link rel="stylesheet" href="stylesheets/style.css">
  &lt;/head>
  &lt;body>
    &lt;div class="container">
      &lt;p>Hello There this is a short test&lt;/p>
    &lt;/div>
    &lt;script src="javascripts/app.js">&lt;/script>
  &lt;/body>
&lt;/html>
</code>
</pre>
    
    
    
    
    <script type="text/ng-template" id="secondview.html">
    
    <h1>Second View(Inside ui-view)</h1>

<pre>
<code class="language-html">
  
  
  
&lt;html>
  &lt;head>
    &lt;title>Test&lt;/title>
    &lt;link rel="stylesheet" href="stylesheets/style.css">
  &lt;/head>
  &lt;body>
    &lt;div class="container">
      &lt;p>Hello There this is a short test&lt;/p>
    &lt;/div>
    &lt;script src="javascripts/app.js">&lt;/script>
  &lt;/body>
&lt;/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>

【问题讨论】：

标签： html css angularjs angular-ui-router

【解决方案1】：

需要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">
        &lt;html>
          &lt;head>
            &lt;title>Test&lt;/title>
            &lt;link rel="stylesheet" href="stylesheets/style.css">
          &lt;/head>
          &lt;body>
            &lt;div class="container">
              &lt;p>Hello There this is a short test&lt;/p>
            &lt;/div>
            &lt;script src="javascripts/app.js">&lt;/script>
          &lt;/body>
        &lt;/html>
        </code>
        </pre>
    </div>

然后它起作用了。

Plunder demo here.

【讨论】：