CODEWITHSUNDEEP
htmlcssangularjsangular-ui-router
Victor Le
Victor Le

Reputation: 1788

Angularjs UI-Router Issue

So here I have my index.html and app.js. I'm trying to use prismjs to show a code block on my view .If you run the snippet below me. 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. 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.

Is there any configuration I would have to do? I believe it has something to do with the 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.

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) 

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>

Upvotes: 0

Views: 88

Answers (1)

Yin Gang
Yin Gang

Reputation: 1443

Need a 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>
        <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>

Then it worked.

Plunder demo here.

Upvotes: 1

Related Questions