Question

Hola gente, soy nuevo con angularjs y me he encontrado un problemilla.

Tengo una web en la que voy cambiando el contentido de <div ng-view></div> usando ngRoute y quiero colorear la sintaxis de un bloque de código con highlights.js o prim.js. Si meto el código en el index.html lo colorea bien, pero si lo tengo en una página aparte que cargo desde app.js no actúa el coloreado.

INDEX.HTML

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

APP.JS

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

content-principal.html

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

Supongo que es porque angularjs renderiza una sola vez el html, ¿será ésta la causa? ¿cuál puede ser la solución?

Gracias & Salu2!!!

Answer 1

crea una directiva que formate los elementos <code>:

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

---

<pre><code ng-prism class="language-javascript">
    alert('1');
</code></pre>

fuente: http://blog.chorip.am/articles/prismjs-and-angularjs/