javascript - 在 Angular 应用程序中使用 prismjs

Question

我正在尝试在我的 Angular 应用程序中使用 prismjs
这是我到目前为止得到的

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 works  -->
<pre nag-prism source="code" class="language-css"></pre>

但我想让它也适用于类似的东西

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

</code>
</pre>

为方便起见，我制作了一个 plunkr
有什么建议吗？

Answer 1

据我了解，您的目标是构建指令，以突出显示作为常量、动态变量或上述两者混合给出的代码。如果您不喜欢帖子中的语法，这里是解决方案。

主要问题是在应用 Prism 高亮功能之前，需要编译代码模板以将 {{variables}} 更改为它们的值。在您的解决方案中，突出显示功能应用于原始模板。

想法是将绑定(bind)类型从“=”更改为“@”，并在所有情况下将源代码作为属性传递。

旧绑定(bind):

scope: {
    source: '='
}

新绑定(bind):

scope: {
    source: '@'
}

Angular 文档:

@ or @attr - bind a local scope property to the value of DOM attribute. The result is always a string since DOM attributes are strings. If no attr name is specified then the attribute name is assumed to be the same as the local name. Given and widget definition of scope: { localName:'@myAttr' }, then widget scope property localName will reflect the interpolated value of hello {{name}}. As the name attribute changes so will the localName property on the widget scope. The name is read from the parent scope (not component scope).

更新的 html 示例(请注意第一个示例中的旧绑定(bind)也已更改!):

<!-- 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>"
    };
}]);

您可以在这里找到有效的解决方案:working sample

编辑:更新指令以达到下面评论中的目标

为了正确显示嵌入的内容，必须手动编译。它会导致指令代码发生一些变化(如果不为空且未定义源，则以下版本使用嵌入的内容):

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>"
    };
}]);

以下示例添加绑定(bind)到输入的代码块以显示链接有效:improved sample