在指令的元素之后附加模板答案

【问题标题】：Append template after element from a directive在指令的元素之后附加模板
【发布时间】：2016-02-24 13:53:54
【问题描述】：

是否可以使用角度指令在某些元素之后插入模板？

我正在尝试在文本区域之后插入“example.html”模板。
我做了一个plunker：https://plnkr.co/edit/bdBjmsi2lIbzxtl0Uw89?p=preview
如您所见，HTML 位于 text-area 标记（开发工具）内。

index.html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <link rel="stylesheet" href="style.css">
    <script data-require="angular.js@1.5.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js" data-semver="1.5.0"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <form name="example-form">
        <textarea rows="3" id="goal" name="name" data-ng-model="model.name" example="10"></textarea>
        <example></example> <!-- Directive used here -->
    </form>
  </body>

</html>

script.js

app.directive('example', function() {
    return {
        restrict: 'A',
        scope: {},
        require: ['^form','ngModel'],
        templateUrl: 'example.html',
        link: function(scope, element, attrs, ctrls) {
            console.log(element);
        }
    } 
});

谢谢！

【问题讨论】：

我认为你需要使用 transclude。

标签： javascript angularjs directive

【解决方案1】：

您没有在 index.html

的任何地方使用指令

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <link rel="stylesheet" href="style.css">
    <script data-require="angular.js@1.5.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js" data-semver="1.5.0"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <form name="example-form">
        <textarea rows="3" id="goal" name="name" data-ng-model="model.name" example="10"></textarea>
        <example></example> <!-- Directive used here -->
    </form>
  </body>

</html>

【讨论】：