Create AngularJS Ng Elements From Javascript

Question

I would just like to know how to create this from javascript using angularJS:

<input type="text" ng-model="TheText">{{TheText}}

For example using something like this:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body ng-app="myApp" ng-controller="myCtrl">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
        <div id="Holder"></div>

        <script>
            angular.module('myApp', [])
            .controller('myCtrl', function() {
                var newdiv = document.createElement('div');
                newdiv.innerHTML = '<input type="text" ng-model="TheText">{{TheText}}';
                document.getElementById("Holder").appendChild(newdiv);
            });
        </script>
    </body>
</html>

I assume you would have to use $compile or something like that but I don't seem to get any of that working. Basically the problem is that any ng directives dont't see to work when I create it this way.

SOLUTION:

Use custom directives, this answer solves my problem:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body ng-app="myApp">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
        <div mydiv></div>

        <script>
            angular.module("myApp", [])
            .directive("mydiv", function() {
                return {
                    template: '<input type="text" ng-model="TheText">{{TheText}}'
                };
            });
        </script>
    </body>
</html>

Léo R. · Accepted Answer · 2018-01-29 10:57:22Z

1

Why not to try simple (but powerful) html() method:

iElement.html('<svg width="600" height="100" class="svg"></svg>');

Or append as an alternative:

iElement.append('<svg width="600" height="100" class="svg"></svg>');

And , of course , more cleaner way:

 var elt = angular.element('<input type="text" ng-model="TheText">{{TheText}}');
 iElement.append(elt);

answered Jan 29, 2018 at 10:57

Léo R.

2,7161 gold badge13 silver badges23 bronze badges

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

1 Comment

Frank Over a year ago

Thanks Leo, would you might explaining the answer a bit more please? I don't understand where iElement comes from

Collectives™ on Stack Overflow

Create AngularJS Ng Elements From Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related