CODEWITHSUNDEEP
htmlangularjsangularjs-directiveelement
CRDeity
CRDeity

Reputation: 107

How to add element dynamically in angularjs without using directive?

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.

Add element using directive

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!

Upvotes: 3

Views: 4713

Answers (2)

Deepu Reghunath
Deepu Reghunath

Reputation: 9663

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);

    };
  }]);

Upvotes: 5

Maxim Shoustin
Maxim Shoustin

Reputation: 77904

You can go with ng-include

Fetches, compiles and includes an external HTML fragment.

Upvotes: 1

Related Questions