Angular 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文件中并将其包含到您的页面中。