external template (templateURL) in Angular directive is not working

Question

I'm trying to create an accordion on button click using AngularJS directive. I have external template for creating accordion. But I couldn't get it working. Here is the code:

Directive:

 (function() {
        'use strict';

        angular.module('accountApp')
        .directive('addSubsite', addSubsite);
        function addSubsite ($compile, $templateRequest){
            var ddo = {
                restrict: 'A',
                link: function(scope, element) {
                    element.bind("click", function(e){
                        $templateRequest("addSubsiteTemplate.html").then(function(html){
                          var template = angular.element(html);
                          $element.append(template);
                          $compile(template)(scope);
                          $element.find(".add-subsites").append(template);  
                       });
                    });
                }
            };
            return ddo;

        }
    })();

index.html

<button add-subsite type="button" class="btn btn-primary pull-right margin10-b"id="aid-addSubSitebtn">Add Sub-Site</button>
<accordion>
    <accordion-group>
<div class="accordion-heading header">
                <a class="accordion-toggle" id="primary__site__address" data-toggle="collapse" href="#primary__site">
                <h4><span class="pull-left"><i class="icon-minus"></i></span>Business Name (Primary Site)</h4></a>                  
            </div>
      <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
    </accordion-group>    
  </accordion>

Template.html

<accordion>
        <accordion-group>
    <div class="accordion-heading header">
                    <a class="accordion-toggle"data-toggle="collapse" href="#subsite__site">
                    <h4><span class="pull-left"><i class="icon-minus"></i></span>Business Name (SubSite)</h4></a>                   
                </div>
          <div class="form-group">
        <label for="exampleInputName2">Name</label>
        <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
      </div>
      <div class="form-group">
        <label for="exampleInputEmail2">Email</label>
        <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
      </div>
      <button type="submit" class="btn btn-default">Send invitation</button>
        </accordion-group>    
      </accordion>

Why are you trying to append same object to one place then trying to append same object to a class that doesn't exist? Also why aren't you using your data model to drive the view instead of manually appending to the dom? Also unless you are using jQuery on top of angular `find()` doesn't work on class selectors. Seems like a lot going wrong here. Suggest you create a plunker demo — charlietfl, May 08 '17 at 06:05
Strongly suggest you read [thinking-in-angularjs-if-i-have-a-jquery-background](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) — charlietfl, May 08 '17 at 06:11

score 0 · Accepted Answer · answered May 10 '17 at 01:08

I changed my approach Here is the sample https://jsfiddle.net/2u7aLg5c/

angular.module('testApp',[])
.controller('TestController', function(){
    const vm = this;
  vm.inputs=[{}];
  vm.myInput = [];
  vm.add = function(){
    vm.inputs.push({})
  }

})

external template (templateURL) in Angular directive is not working

index.html

Template.html

1 Answers1