javascript - 如何在单击按钮时呈现外部模板？

Question

假设我有以下标记:

<main ng-controller="MainController">
    <article id="story-container"></article>
    <button ng-click="newSection()">+ Add Section</button>
 </main>

我需要在单击按钮时编译以下模板并将其附加到文章元素内。

<script  id="newSectionTmpl" type="text/ng-template">
    <section>Hello, {{name}}!</section>
</script>

我尝试过类似的方法，但不确定这是否是一个好方法:

app = angular.module('myApp', []);

app
  .controller('MainController',['$scope', '$compile', function($scope, $compile) {
    $scope.name = "Denis";
    $scope.newSection = function() {
      var tmpl = $('#newSectionTmpl').html();
      var $el = $('#story-container');
      console.log(tmpl);
      var html = $compile(tmpl)($scope);
      $el.append(tmpl);
    }
  }                                                                
]);

另外，如何从外部文件加载我的模板？这是 jsBin 的链接:http://jsbin.com/zuyicewexahi/5/edit?html,js,output

Answer 1

尝试 ng-include 指令 ng-include documentation

<div class="modal-header">
<form  ng-include src="'/src/sample.html'"></form>
</div>

sample.html 是一个外部文件，它将使用 ng-include 指令加载到当前的 html 中