0

我是 angularjs 的菜鸟，我有一个问题。我在我的网络中使用 prism.js 或 highlight.js（结果相同）。它在 index.html 中正常工作，但在我使用 ngRoute 加载的其他模板中不起作用。我相信问题是 angularjs 只是它再渲染一次 html 并且当我加载我的 content-principal.html 时它不起作用。

索引.HTML

//<pre><code class="language-javascript">
    colour syntax is ok
//</code></pre>

APP.JS

ionicEsApp.config(function($routeProvider) {
    $routeProvider.
    when('/', {
        templateUrl: 'templates/content-principal.html',
        //controller: 'IonicEsController'
 }).

内容-principal.html

//<pre><code class="language-javascript">
    colour syntax is NO work
//</code></pre>

¿任何解决方案？谢谢和对不起我的英语：P。

4

3 回答 3

2

解决了。

我们需要：

索引.html

来自http://prismjs.com/#basic-usage的 prims.js 和 prism.css

应用程序.js

创建一个新指令（在 .conf 之前非常重要）

var ionicEsApp = angular.module('ionicEsApp', [
    'ngRoute',
    'ngResource',
    'ionicEsController'
]);

ionicEsApp.directive('ngPrism', [function() {
    return {
        restrict: 'A',
        link: function($scope, element, attrs) {
            element.ready(function() {
                Prism.highlightElement(element[0]);
            });
        }
    }
}]);

ionicEsApp.config(function($routeProvider) {
    $routeProvider.
    when('/', {
        templateUrl: 'templates/content-principal.html',
        //controller: 'IonicEsController'
    }).
    otherwise({
        redirectTo: '/'
    });

});

内容-principal.html

我们必须在代码标签中使用新指令。

<pre><code ng-prism class="language-javascript">
    alert("Prims is ok");
</code></pre>

注意：html有问题，我们需要用<替换<符号。例子：

<pre><code class="language-markup">
&lth1> Hello! &lt/h1>
</code></pre>
于 2015-02-02T20:25:51.610 回答
0

还不能对答案发表评论，但我发现这种技术很有用。

如果您“手动”加载模板并将文本插入 dom，Angular 会自动将内容转换为 HTML 实体，这意味着您的原始模板仍然可读，但可以正确显示。

在我的应用程序中，我使用 $sce 和 $templateRequest 来获取模板，然后将一个角度模板变量设置为获取的模板的值。

几点注意事项：

  • 每个指令实例有多个代码示例，由 codeType 变量标识
  • 我的模板文件名采用 _{codeType}.sample 的形式，例如 _css.sample
  • 模板位置作为 dom 中指令的属性传入
  • dom 元素容器由类 .sample-{codeType} 标识，例如 .sample-css
  • 角度占位符由 {{sample{codeType}} 标识，例如 {{samplecss}}
  • 为了防止出现竞争条件，我使用 $timeout 等待一个节拍并允许当前的 $apply() 在代码上调用 Prism 之前完成。

此方法还允许具有相似输出的多种类型的代码 - 例如，在我的样式指南中，我同时显示了输出 HTML (codeType = 'html') 和未渲染的 Angular 模板 (codeType = 'ng') - 两者都需要Prism .language-markup 类。

如果每个指令只有一个代码示例，这可以大大简化。

function StyleGuideComponentController($scope, $element, $templateRequest, $sce, $timeout)
{
    var codeSampleTypes =
    [
        'html',
        'ng',
        'ngjs',
        'css',
        'less'
    ];

    insertAllCodeSamples();

    function insertAllCodeSamples()
    {
        var key;

        for (key in codeSampleTypes)
        {
            insertCodeSample(codeSampleTypes[key]);
        }
    }

    function insertCodeSample(codeType)
    {
        var sampleUrl = $scope.templateLocation + '/_' + codeType + '.sample',
            sampleCode = $sce.getTrustedResourceUrl(sampleUrl);

        $templateRequest(sampleCode).then(function(template)
        {
            var codeElement    = $element.find('.sample-' + codeType)[0],
                prismLanguage      = codeType,
                prismLanguageTypes =
                {
                    'html' : 'markup',
                    'ng'   : 'markup',
                    'js'   : 'javascript',
                    'ngjs' : 'javascript'
                },
                key;

            for (key in prismLanguageTypes)
            {
                if (prismLanguage === key)
                {
                    prismLanguage = prismLanguageTypes[key];
                }
            }

            codeElement.className += ' language-' + prismLanguage;

            $scope['sample' + codeType] = template;

            $timeout(function()
            {
                Prism.highlightElement(codeElement);
            });
        }, function()
        {
            $scope['sample' + codeType] = 'An error occurred' +
            ' while fetching the code sample';
        });
    }

    return {
        restrict   : 'E',
        scope      :
        {
            templateLocation: '='
        },
        controller : StyleGuideComponentController
    };
}
于 2016-02-02T12:15:32.270 回答
0

如果您使用 ng-view 加载模板，有一个非常简单的方法可以做到这一点：

如果你有这样的事情：

<div ng-controller="MainCtrl">
     <div id="content" ng-view>
     </div>
</div>

您可以将其添加到 MainCtrl 控制器：

$scope.$on('$viewContentLoaded', function(){
    Prism.highlightAll();
});

现在，如果您使用默认方式突出显示代码：

<pre><code class="language-javascript">
     Prism will highlight it
</code></pre>

棱镜将突出它！

于 2016-12-27T03:13:57.337 回答