AngularJS 1 enthalten vorformatierten HTML-Code aus Vorlagen

Ich schreibe eine Tutorial-Website für angularjs mit angularjs und ich habe viele Abschnitte des Beispielcodes. Also ich habe eine Reihe von <pre><html ng-app></html></pre> Tags.AngularJS 1 enthalten vorformatierten HTML-Code aus Vorlagen

Ich möchte die Code-Beispiele in separaten Dateien, aber ng-include funktioniert nicht auf <pre></pre> Tags. Wie würde ich HTML-Codebeispiele in separaten Dateien speichern?

Kleine Seite Frage: Was würden Sie den Ordner dieser Dateien nennen? Würde ./samples/ funktionieren?

Ich habe diese Lösung versucht: https://stackoverflow.com/a/34164921/859082

Aber es scheint nicht zu funktionieren, weil die Probe nicht vorformatiert für Zeilenumbrüche und Tabs nicht bleiben, und ich weiß nicht, warum es nicht funktioniert. Hier ist mein Versuch, die bisherige Lösung mit: http://plnkr.co/edit/0nP76Im6XWWCleShsxAR?p=preview

Quelle

2016-06-03 Harrison Tran

Noch auf der Suche nach einer Antwort für die Ordnernamen. Würde ./samples/ arbeiten? –

Ich gegabelt Ihren Plünderer, und kam mit dieser plunker here. Sie könnten den Pfad dynamisch festlegen, um den Inhalt zu aktualisieren.

HTML

<body ng-app="app"> 
    <div ng-controller="mainCtrl"> 
     <pre ng-bind="content"></pre> 
    </div> 
    </body>

angular 
    .module('app', []) 

    .controller('mainCtrl',function($scope,$http,$log){ 

    $http({ 
     method: 'GET', 
     url: 'common1.html' 
    }).then(function successCallback(resp) { 
     $scope.content = resp.data; 
     }, function errorCallback(response) { 
     $log.warn('Could not locate file...'); 
     }); 

    });

Zusätzliche Plunks:

zulassen Vorlage zu ändern, die angezeigt wird (ändern inde x COMMON1): http://plnkr.co/edit/s5N1nhYQ6SnJ7SVKHVas?p=preview
Seite anzeigen eigener Code: http://plnkr.co/edit/hJm0b4SQzPTSeRrGmYCx?p=preview
Mehr Proben pro Seite: http://plnkr.co/edit/Wtyp6xL1BViicoFUVOSb?p=preview

Quelle

2016-06-03 03:30:29 Brian

Hmm, @WorkWir haben eine Lösung für mich bereitgestellt. Würden Sie sagen, Ihre Lösung ist ein besseres Design? Wenn ja warum? –

Ich würde sagen, dass es ein besseres Design ist, in erster Linie, weil es Ihnen ermöglicht, den enthaltenen Inhalt so zu schreiben, wie Sie eine tatsächliche HTML-Datei würden. In diesem Beispiel kann es sich als Inhalt laden: http://plnkr.co/edit/hJm0b4SQzPTSeRrGmYCx?p=preview. Dadurch können Sie die enthaltenen Dateien leichter erstellen und bearbeiten. Zweitens schieße ich immer aus Gründen der Einfachheit, und in diesem Fall benötigt es keine zusätzlichen Abhängigkeiten und minimiert den erforderlichen Code zum Vervollständigen. – Brian

Ich glaube auch, dass, wenn es Ihr Ziel ist, die Datei dynamisch zu laden, es einfacher wäre, dies innerhalb des Controllers zu handhaben, anstatt eine Funktion zum Ändern der Vorlagen-URL in der Direktive zu erstellen. – Brian

Set CSS white-space: pre-wrap; für Ihre myPre Richtlinie.

Quelle

2016-06-03 03:24:09 WorkWe

Danke! Ich bin so frustriert, dass es 4 Stunden dauerte, um es herauszufinden. Sollte früher hier gepostet werden. Lösung http://plnkr.co/edit/0nP76Im6XWWCleShsxAR?p=preview –

Haha, Sie sind willkommen. :) – WorkWe

AngularJS 1 enthalten vorformatierten HTML-Code aus Vorlagen

Antwort

Verwandte Themen