AngularJS: Dynamic Directive, not loading template

Question

Thank you for your attention.

I'm intermediate in my Angular know-how and I'm trying to make a dynamic directive/widget.

I've got massive headache from my neck being out and I'm trying to fix this on my own, but I need someone to point me in the right direction.

I have a directive:

(function () {
  'use strict';

  angular.module('app')
    .directive('tool', function() {
      return {
        restrict: 'E',
        templateUrl: 'tool-template.html'
      }
    })
  ;
})();

tool-template.html:

<div class="tool-wrap">
  <svg>
  </svg>
</div>

I'm adding the directive to the view dynamically, using the main controller:

(function(){
  'use strict';

  angular.module('app')
    .controller('MainController', function(UserModel, Auth, $state, $window, $compile, $scope){
      var ctrl = this;
      var project = $(.project);

      // ...

      ctrl.btnDown = function (event) {
        switch(event.which) {
          case 1:
            project.append(add());
            break;

          default:
            break;
        }
      };

      var add = function () {
        return $compile("<tool></tool>")($scope);
      };

      // ...

    })
  ;
});

From what I've gathered I need to use '$compile' to add the new directive element to the dom dynamically. Is this correct?

The issue I'm having is.. I'm able to add the new HTML element tool-tags, but when I open the browser developer toolbar (shift + ctrl + J), the contents of tool-template isn't inside the tool-tags. i.e. The div and svg.

I understand the answer must be painfully obvious but, I'm struggling and I want to get this work done today.

I've just been reading related questions, do I need to run $scope.apply()? — Lightfooted
– Lightfooted, Commented Mar 9, 2016 at 9:37

K.Burrell · Accepted Answer · 2016-03-09 10:32:07Z

1

This is the solution I used:

var dir = angular.element(document.createElement("DirectiveName"));
var el = $compile(dir)($scope);
var box = "#NameOfContainer";
angular.element(box).append(dir);

Create the directive as an element
Compile the directive and give it scope
Select the element that you want the directive to be added to
Append the compiled element to the element you selected

Plunker example : https://plnkr.co/edit/0hWqZzfgWIVPrUhVGIDL?p=preview

answered Mar 9, 2016 at 10:32

K.Burrell

2491 gold badge3 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lightfooted · Accepted Answer · 2016-03-09 13:23:19Z

0

I found that when creating a element using the directive name (if your directive is two words in camelcase), you need to use the hyphenated format. For example: Directive name = directiveName, Element name = directive-name.

I also found that when using templateUrl, it has to be the full file path. "app/main/tool-template.html"

answered Mar 9, 2016 at 13:23

Lightfooted

8091 gold badge7 silver badges13 bronze badges

Collectives™ on Stack Overflow

AngularJS: Dynamic Directive, not loading template

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related