亮点不允许外部模板工作 [英] Highlights don't work in external template

问题描述

我与angularjs一个小白，我有一个问题。
我使用prism.js或highlights.js在我的网络（相同的结果）。它正常工作到index.html的，但它并不在我ngRoute加载其他模板。
我认为这个问题是angularjs只有它呈现一次的HTML，当我载入我的内容principal.html这是行不通的。

I am a noob with angularjs and I have a problem. I am using prism.js or highlights.js in my web (same result). It works correctly into index.html but It doesn't work in other templates that I load with ngRoute. I believe that the problem is angularjs only it renders one more time the html and it doesn't work when I load my content-principal.html.

INDEX.HTML 的

INDEX.HTML

//<pre><code class="language-javascript">
    colour syntax is ok
//</code></pre>

APP.JS 的

APP.JS

ionicEsApp.config(function($routeProvider) {
    $routeProvider.
    when('/', {
        templateUrl: 'templates/content-principal.html',
        //controller: 'IonicEsController'
 }).

内容principal.html 的

content-principal.html

//<pre><code class="language-javascript">
    colour syntax is NO work
//</code></pre>

¿任何解决方案？感谢和抱歉，我的英语：P

¿any solution? Thanks and sorry by my english :P.

推荐答案

解决。

我们需要：

的index.html

prims.js和prism.css从 http://prismjs.com/#basic-usage

prims.js and prism.css from http://prismjs.com/#basic-usage

app.js

要创建一个新的指令（从之前的.conf非常重要）

To create a new directive (VERY IMPORTANT before from .conf)

var ionicEsApp = angular.module('ionicEsApp', [
    'ngRoute',
    'ngResource',
    'ionicEsController'
]);

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

ionicEsApp.config(function($routeProvider) {
    $routeProvider.
    when('/', {
        templateUrl: 'templates/content-principal.html',
        //controller: 'IonicEsController'
    }).
    otherwise({
        redirectTo: '/'
    });

});

内容principal.html 的

content-principal.html

我们必须使用新的指令到code标记。

We have to use the new directive into code tag.

<pre><code ng-prism class="language-javascript">
    alert("Prims is ok");
</code></pre>

注：没有与HTML一个问题，我们需要更换的＆lt;通过与放大器的符号; LT。例如：

NOTE: There is a problem with html, we need replace the < symbol by &lt. Example:

<pre><code class="language-markup">
&lth1> Hello! &lt/h1>
</code></pre>

这篇关于亮点不允许外部模板工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！