Append template after element from a directive

Question

Is it possible to insert a template after some element using an angular directive?

I'm trying to insert the "example.html" template after the text-area.
I made a plunker: https://plnkr.co/edit/bdBjmsi2lIbzxtl0Uw89?p=preview
As you can see the HTML is inside the text-area tag (dev tools).

index.html

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

  <head>
    <link rel="stylesheet" href="style.css">
    <script data-require="[email protected]" 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);
        }
    } 
});

Thanks!

Mr_Perfect Mr_Perfect · Accepted Answer · 2017-06-09T05:05:34

You didn't use directive anywhere in index.html

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

  <head>
    <link rel="stylesheet" href="style.css">
    <script data-require="[email protected]" 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>

Append template after element from a directive

1 Answers