UU-Router Angularjs Issue

Итак, здесь у меня есть index.html и app.js. Я пытаюсь использовать prismjs, чтобы показать блок кода на моем представлении. Если вы запустите сниппет под мной. Вот как мне нравится мое приложение. Но в моем реальном приложении я бы не хотел включать тег, содержащий мой secondview.html. Я бы хотел, чтобы он был в отдельном файле. Но когда я делаю это, файл prism css не будет работать внутри ui-view.UU-Router Angularjs Issue

Есть ли какая-либо конфигурация, которую мне нужно будет сделать? Я считаю, что это связано с привязкой ng. Here - это то, что похоже на ui-view. Я хочу, чтобы я мог предоставить еще одну ссылку, чтобы показать вам, как она выглядит за пределами ui-view, но у меня нет достаточной репутации, чтобы разместить более двух ссылок ... lol Но у нее просто есть все классы, которые призмы js вводится в элементы, которые будет отображать prism.css.

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

Кодекс ниже меня имеет secondview.html внутри index.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>

источник

2016-05-11 Viet Le

Нужна directive:

.directive('ngPrism', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
     Prism.highlightElement(element.find('code')[0]); 
     } 
    } 
    })

Тогда обернуть код HTML по <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>

Затем он работал.

Plunder demo here.

источник

2016-05-11 08:45:54

Я люблю тебя, спасибо –

UU-Router Angularjs Issue

ответ

Смежные вопросы