Creating item dynamically in controller with AngularJS

Question

I created a custom directive like below.

 app.directive('myDirective', function () {
    return {
        template: '<h1>This is myDirective</h1>',
        restrict: 'E',
        replace: true,
        link: function (scope, element, attrs) {

        }
    };
});

and my HTML code is like below.

<ion-view view-title="Search">
  <ion-content>
      <div id="myid"></div>
   </ion-content>
</ion-view>

Finally, my controller is like below. I would like to create my-directive element dynamically inside the controller like below. But it doesn't work. Do you know any way to solve this problem? thanks in advance!!

app.controller('Search', function ($scope) {
    var content = document.getElementById("myid");
    content.setAttribute("class", "list");
    var mydir = document.createElement("my-directive");

    content.appendChild(mydir);
})

why dynamically? it seems you are approaching it wrong. I assume there is some logic deciding when to show this directive, in which case you can use an [`ng-if`](https://docs.angularjs.org/api/ng/directive/ngIf), or a `ui-view` etc to dynamically render it. — Rhumborl, Sep 08 '16 at 08:04
unfortunately ng-if or other ng components doesn't solve my problem.my template data coming from server dynamicly and using inside the controller is the best solution for me.But I have could not solve yet : ) — seyid yagmur, Sep 08 '16 at 08:14

score 1 · Accepted Answer · answered Sep 08 '16 at 11:30

Not sure what is the reason behind this:

my template data coming from server dynamicly and using inside the controller is the best solution for me

Well, it is not recommended but yes, you can do it. See an example below:

var app = angular.module("sa", []);

app.controller("Search", function($scope, $compile) {

  $scope.doTheBadThing = function() {
    var $parent = angular.element(document.getElementById("myid"));
    $parent.addClass("list");
    var mydir = document.createElement("my-directive");
    // or
    //var mydir = "<my-directive></my-directive>"; 
    $parent.append(mydir);

    // This is the main thing. You need to compile the dynamic HTML so that Angular can initialized on those template
    $compile($parent.contents())($scope);
  };
});

app.directive('myDirective', function() {
  return {
    template: '<h1>This is myDirective</h1>',
    restrict: 'E',
    replace: true,
    link: function(scope, element, attrs) {

    }
  };
});

#myid {
  background: #ccc;
  min-height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="sa" ng-controller="Search">
  <button ng-click="doTheBadThing()">Do the bad thing</button>
  <div id="myid"></div>
</div>

thank you so very much !! it works.. you saved my week :D I really need this :) — seyid yagmur, Sep 08 '16 at 11:45

score 0 · Answer 2 · answered Sep 08 '16 at 08:35

0

you can call directive in controller like this

app.controller('Search', function ($scope) {
var content = document.getElementById("myid");
content.setAttribute("class", "list");
var mydir = <my-directive></my-directive>;

content.appendChild(mydir);
})

answered Sep 08 '16 at 08:35

zeeshan Qurban

387
1
3
15

can u tell me the actual problem that you face – zeeshan Qurban Sep 08 '16 at 10:22
when I run as you write, it throw this error " `ionic.bundle.js:25642 TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. ` " – seyid yagmur Sep 08 '16 at 10:51

score 0 · Answer 3 · answered Sep 08 '16 at 11:23

Manipulating DOM from controller is a very bad idea. You should never do this because it creates tight coupling between the controller and the view.

It is not quite clear what exactly you are trying to achieve. You may want to use ng-include with the dynamic path to to the template set on the controller scope and in controller $scope.path = 'templates/my_template_1.html';

Creating item dynamically in controller with AngularJS

3 Answers3