Angular JS无法与Prism.js一起使用

Question

您能否看一下这个演示 ，让我知道为什么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>

恶作剧

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>

code-highlights您可以添加到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文件中，并将其包含在您的页面中。