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

为white-space: pre-wrap;指令设置CSS myPre。

Answer 2

我分叉了你的傻瓜，并提出了这个plunker here。您可以动态设置路径，这将更新内容。

<强> 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包含来自模板

2 个答案: