Угловой JS не работает с Prism.js

Question

Не могли бы вы взглянуть на This Demo и сообщить мне, почему Angular не работает на Prism.js?

<div ng-app=""> 
<p>Background : <input type="text" ng-model="tax" placeholder="Enter Bg Here"></p> 
<pre class="line-numbers language-css" > 
<code> 
.navbar-app { 
    background-color: #{{tax}}; 
} 

</code> 
</pre> 
</div> 

Thnaks

Answer 1

Это демо не показывает достаточно кода, специально app.js. если вы хотите использовать призму с угловым, тогда вы можете использовать директиву.

<script src="bower_components/prismjs/prism.js" "data-manual"></script> 
<script src="bower_components/prismjs/plugins/line-numbers/prism-line-numbers.js"></script> 

Добавить библиотеки.

<code-highlight source="codeToHighlight" type="{{ codeType }}" disable-highlighting="{{ disableHighlighting }}"></code-highlight> 

код подчеркивает директиву, которую вы можете добавить в свой html-файл.

angular.module('app') 
    .directive('codeHighlight', ['$compile', '$timeout', 
    function ($compile, $timeout) { 
     return { 
     restrict: 'E', 
     scope: { 
      type: '@', 
      source: '=', 
      disableHighlighting: '@' 
     }, 
     link: function(scope, element) { 
      var timeout; 
      scope.$watch('source', function(value) { 
      if (!value) return; 
      element.html('<pre class="line-numbers"><code>{{ source }}</code></pre>'); 
      $compile(element.contents())(scope); 
      var code = element.find('code')[0]; 
      code.className = 'language-'+scope.type; 
      if (scope.disableHighlighting !== 'true') { 
       timeout = $timeout(function() { 
       Prism.highlightElement(code); 
       }, 0, false); 
      } else { 
       element.find('pre')[0].className = 'language-'+scope.type + ' line-numbers'; 
      } 
      }); 

      scope.$on('$destroy', function() { 
      $timeout.cancel(timeout); 
      }); 
     } 
     }; 
    } 
    ]); 

И добавьте это в файл codeHighlight.js и включите его на свою страницу.