How to add element dynamically in angularjs without using directive?

Question

First of all, I'm new in Angularjs and not good at English.

I tried to add <li> by using directive, and below link is completed result of my first purpose.

Second is passing value from Controller to directive or from directive to Controller, known as two-way binding.

But in this step, I couldn't figure out how to use @,= and '&'.

I guessed it's because of using directive in directive.

In my original code, my modal is made of directive, so button directive seems cannot get value from Controller.

I'm sorry I cannot show you my own code because I don't know how to make many directives in fiddle.

.

I wanna know there are any way to add element dynamically without using directive.

No matter what you suggested like link, doc, or something, it'll be great helpful to me.

Just give a little attention please. Thank you. Have a nice day!

Deepu Reghunath · Accepted Answer · 2017-09-26 05:12:59Z

5

This may helpful.

You can use javascript as follows for achieving this.

https://jsfiddle.net/u08pa50z/

angular.module('myApp', [])


.controller('myCtrl', ['$scope', function($scope) {
    $scope.count = 0;
    var el = document.createElement("ul");
    el.style.width="600px";
    el.style.height="500px";
    el.style.background="green";

    var parent=document.getElementById("sib");    
    parent.appendChild(el);





    $scope.myFunc = function() {

        var ch = document.createElement("li");      
            el.appendChild(ch);

    };
  }]);

answered Sep 26, 2017 at 5:12

Deepu Reghunath

10.1k2 gold badges42 silver badges48 bronze badges

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

3 Comments

CRDeity Over a year ago

Oh!! this is what I want!! Sorry but, is it possible to put directive in appendChild? I can use this but my element is too long to adapt this.

Deepu Reghunath Over a year ago

use can use $compile for this. (codeproject.com/Tips/1038684/…

CRDeity Over a year ago

Oh my!! You're my saviour!! Thank you so much!

Maxim Shoustin · Accepted Answer · 2017-09-26 04:51:51Z

1

You can go with ng-include

Fetches, compiles and includes an external HTML fragment.

answered Sep 26, 2017 at 4:51

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

Collectives™ on Stack Overflow

How to add element dynamically in angularjs without using directive?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related