Основные моменты не работают во внешнем шаблоне

Question

Я нуб с angularjs, и у меня есть проблема. Я использую prism.js или lights.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'
 }).

Содержание-principal.html

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

¿Какое-нибудь решение? Спасибо и извините за мой английский:P.

Answer 1

Решаемые.

Нам нужно:

index.html

prims.js и prism.css от http://prismjs.com/

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

});

Содержание-principal.html

Мы должны использовать новую директиву в теге code.

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

ПРИМЕЧАНИЕ. Существует проблема с html, нам нужно заменить символ <на & lt. Пример:

<pre><code class="language-markup">
&lth1> Hello! &lt/h1>
</code></pre>

Answer 2

Пока не могу комментировать ответ, но я нашел эту технику полезной.

Если вы загрузите свои шаблоны "вручную" и вставите текст в dom, Angular автоматически преобразует контент в HTML-объекты, что означает, что ваш необработанный шаблон по-прежнему читается, но отображается правильно.

В моем приложении я использую $ sce и $ templateRequest для получения шаблона, затем устанавливаю угловую переменную шаблона равной значению выбранного шаблона.

Пара заметок:

• У меня есть несколько примеров кода для каждого экземпляра директивы, идентифицируемых с помощью переменной codeType
• Имена файлов моих шаблонов имеют вид _{codeType}. Например, _css.sample
• Расположение шаблона передается как атрибут директивы в dom
• Контейнеры элементов dom идентифицируются классом.sample-{codeType}, например.sample-css
• Угловой заполнитель определяется {{sample{codeType}}, например, {{samplecss}}
• Чтобы предотвратить условия гонки, я использую $timeout, чтобы дождаться паузы и позволить текущему $apply() завершить работу перед вызовом Prism для кода.

Этот метод также позволяет использовать несколько типов кода с одинаковыми выходными данными - например, в моем руководстве по стилю я показываю как выходной HTML-код (codeType = 'html'), так и неотрисованные угловые шаблоны (codeType = 'ng') - оба требуют Призма. Язык-разметка класс.

Это может быть значительно упрощено, если у вас есть только один пример кода на директиву.

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
    };
}

Answer 3

Это действительно простой способ сделать это, если вы используете 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>

Призма выделит это!