AngularJS 1包含來自模板的預先格式化的html代碼

Question

我正在使用angularjs為angularjs編寫教程網站，我有很多示例代碼部分。 所以我有一堆<pre><html ng-app></html></pre>標簽。

我想將代碼示例放在單獨的文件中，但ng-include不適用於<pre></pre>標記。 我如何將html代碼示例放在單獨的文件中？

小問題：你會把這些文件的文件夾命名為什么？ 會./samples/工作嗎？

我試過這個解決方案： https ： //stackoverflow.com/a/34164921/859082

但它似乎不起作用，因為樣本沒有保留預換格式換行和標簽，我不知道為什么它不起作用。 這是我嘗試使用以前的解決方案： http ： //plnkr.co/edit/0nP76Im6XWWCleShsxAR？p = preview

Answer 1

設置CSS white-space: pre-wrap; 為你的myPre指令。

Answer 2

我把你的龍頭分叉，然后在這里找到了這個龍頭。 您可以動態設置路徑，這將更新內容。

HTML

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

JS

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

  });

額外的傻瓜：

允許更改顯示的模板（將索引更改為common1）： http ：//plnkr.co/edit/s5N1nhYQ6SnJ7SVKHVas? p= preview
查看頁面自己的代碼： http ： //plnkr.co/edit/hJm0b4SQzPTSeRrGmYCx？p = preview
每頁多個樣本： http ： //plnkr.co/edit/Wtyp6xL1BViicoFUVOSb？p = preview

AngularJS 1包含來自模板的預先格式化的html代碼

問題描述

2 個解決方案

解決方案1
2 2016-06-03 03:24:09

解決方案2
1 已采納 2016-06-03 03:30:29

AngularJS 1包含來自模板的預先格式化的html代碼

問題描述

2 個解決方案

解決方案1 2 2016-06-03 03:24:09

解決方案2 1 已采納 2016-06-03 03:30:29

解決方案1
2 2016-06-03 03:24:09

解決方案2
1 已采納 2016-06-03 03:30:29