Using prismjs in an angular app

Question

I'm trying to use prismjs in my angular app.
This is what I got so far.

app.directive('nagPrism', [function() {
    return {
        restrict: 'A',
        transclude: true,
        scope: {
            source: '='
        },
        link: function(scope, element, attrs, controller, transclude) {
            if(!scope.source) {
                transclude(function(clone) {
                    element.html(clone);
                    Prism.highlightElement(element.find("code")[0]);
                });
            } else {
                scope.$watch(function() {return scope.source;}, function(v) {
                    if(v) {
                        Prism.highlightElement(element.find("code")[0]);
                    }
                });
            }

        },
        template: "<code ng-bind='source'></code>"
    };

}]);

This will work if I have something like this

<!-- This works  -->
<pre nag-prism source="code" class="language-css"></pre>

but I would like to make it work for something like this.

<pre nag-prism class="language-css">
<code>body {
color: red; 
}
  {{code}}

</code>
</pre>

For convenience, I did plunkr.
Any tips?

Answer 1

As far as I understand, your goal is to create a directive that allocates the code given as a constant dynamically using a variable or a combination of the two above. If you are not attached to the syntax from your post, here is the solution.

, Prism , {{variables}} . .

, '=' '@' .

:

scope: {
    source: '='
}

:

scope: {
    source: '@'
}

Angular:

@ @attr - DOM . , DOM . attr , , . : {localName: '@myAttr'}, localName hello {{name}}. name , localName . ( ).

html (, !):

<!-- This works  -->
<pre nag-prism source="{{code}}" class="language-css"></pre>

<!-- Now this works either!  -->
<pre nag-prism source="body {
    color: red; 
}
{{code}}" class="language-css"></pre>

:

app.directive('nagPrism', [function() {
    return {
        restrict: 'A',
        scope: {
            source: '@'
        },
        link: function(scope, element, attrs) {
            scope.$watch('source', function(v) {
                if(v) {
                    Prism.highlightElement(element.find("code")[0]);
                }
            });
        },
        template: "<code ng-bind='source'></code>"
    };
}]);

:

edit: ​​

, . ( , , ):

app.directive('nagPrism', ['$compile', function($compile) {
    return {
        restrict: 'A',
        transclude: true,
        scope: {
          source: '@'
        },
        link: function(scope, element, attrs, controller, transclude) {
            scope.$watch('source', function(v) {
              element.find("code").html(v);

              Prism.highlightElement(element.find("code")[0]);
            });

            transclude(function(clone) {
              if (clone.html() !== undefined) {
                element.find("code").html(clone.html());
                $compile(element.contents())(scope.$parent);
              }
            });
        },
        template: "<code></code>"
    };
}]);

, , , :

Answer 2

Prism , .

app.controller('StartController', ['$scope', function($scope){

 console.log('hello');

 Prism.highlightAll(); // Only this that you need do!

}]);

Answer 3

Add it to the $ stateChangeSuccss event handler

app.run(function($rootScope $timeout){
$rootScope.$on('$stateChangeSuccess', function() {
  $timeout(function() {Prism.highlightAll()}, 0);
});