0

私はangularjsの初心者で、問題があります。私の Web では、prism.js または Highlights.js を使用しています (同じ結果)。index.html では正しく機能しますが、ngRoute でロードした他のテンプレートでは機能しません。問題はangularjsだけで、htmlをもう一度レンダリングするだけで、content-principal.htmlをロードしても機能しないと思います。

INDEX.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'
 }).

content-principal.html

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

¿任意の解決策? 私の英語でありがとう、そしてごめんなさい：P.

4

3 に答える 3

2

解決しました。

必要なもの:

index.html

http://prismjs.com/#basic-usageのprims.jsとprism.css

app.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: '/'
    });

});

content-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

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 に答える