Javascript 在angular应用程序中使用prismjs

我正在尝试在我的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>"
    };

}]);

为了方便起见，我做了一个

---

有什么建议吗？

据我所知，您的目标是构建一个指令，突出显示作为常量、动态变量或以上两种代码的混合给出的代码。若你们并没有从你们的文章中附加到语法，这里有一个解决方案

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

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

旧装订：

scope: {
    source: '='
}

新绑定：

scope: {
    source: '@'
}

角度文档：

@或@attr-将局部作用域属性绑定到DOM的值 属性由于DOM属性是 串。如果未指定属性名，则属性名为 假定与本地名称相同。给定和小部件定义 作用域的类型：{localName:'@myAttr'}，然后是小部件作用域属性 localName将反映hello{{name}的插值。作为 name属性会发生更改，因此 小部件范围。从父作用域（而不是组件）读取名称 范围）

更新的html示例（请注意，第一个示例中的旧绑定也已更改！）：

---

下面的示例添加绑定到输入的代码块，以显示链接是有效的：

您只需要在控制器执行后重新加载Prism插件

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

 console.log('hello');

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

}]);

---

将其添加到$stateChangeSuccess事件处理程序中

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

---

应该足够你了started@dave

scope.source.length

抛出一个错误，因为scope.source未定义，当时的想法是让它也能处理转置的内容，这在应用程序中是不必要的，但如果有办法的话，我会很好奇it@ionutvmi我已经编辑了我的答案，所以它符合这个目标谢谢你在这个问题上花时间。如果以后在哪里接收内容，您会有不同的方法吗@ionutvmi我不认为转置html是这种情况下最好的工具。您要处理的问题是，在突出显示语法时，Prism会在角度控制之外修改DOM。这意味着指令html在高亮显示后不再绑定到角度范围。要使显示的代码保持最新，您需要将其原始版本保存在某个位置，并跟踪相应的模型更改（就像您在plnkr中所做的那样）。由于您仍然需要传递以某种方式使用的变量以跟踪它们的更改，我认为最干净的方法应该是将整个代码作为源属性传递。我刚谈到同样的问题。对源变量和替换变量的双重监视现在也适用于我。

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

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

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

 console.log('hello');

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

}]);

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