Adding an element with directives in Angular

Question

I am adding an element dynamically in Angular. The code is as follows.

myelement.after('<input ng-model="phone" id="phone">');

The element gets added and all works fine. However I think I'm missing a step and Angular does not recognize the new element because when I collect data later, the value of the dynamically added element is not defined.

The reason for adding the element on fly is that the number of inputs is not known from the beginning and user can add as many of them as they want. The actual code is like:

myelement.after('<input ng-model="phone"' + counter + ' id="phone' + counter + '">');

I'm sorry, I should have provided complete sample from the beginning. Please see the following jsfiddle, add some phones (with values) and list them: http://jsfiddle.net/kn47mLn6/4/

And please note that I'm not creating any new directive. I'm only using Angular standard directives, and I prefer not to create a custom directive for this work (unless required).

Md. Mahbubul Haque · Answer 1 · 2015-05-24T05:26:50.780

Assuming that you are adding element to the DOM using directive. You can use built in angular service $compile. Firstly inject the $compile service to your directive. Then in your link function of the directive, get your myElement after which you want to append your element. Then create your element using angular.element(). Then compile it using $compile service and pass the scope in which you are in now.(Here this scope is the directive scope). After getting the compiled dom element you can just append it after your myElement.

here is an example about how you can add element dynamically from directive:

var elementToBeAdded = angular.element('<input ng-model="phone" id="phone">');
elementToBeAddedCompiled = $compile(elementToBeAdded)(scope);
myElement.append(elementToBeAddedCompiled);

If you add your element using $compile service in your directive, angular will recognize your dynamically added element.

score 1 · Answer 2 · answered May 26 '15 at 20:35

I was trying to accomplish this without using directives, but it seems the best way (and probably the only proper way) of adding multiple elements to DOM in Angular is by defining a custom directive.

I found a very nice example here http://jsfiddle.net/ftfish/KyEr3/

HTML

<section ng-app="myApp" ng-controller="MainCtrl">
    <addphone></addphone>
    <div id="space-for-phones"></section>
</section>

JavaScript

var myApp = angular.module('myApp', []);

function MainCtrl($scope) {
    $scope.count = 0;
}

//Directive that returns an element which adds buttons on click which show an alert on click
myApp.directive("addbuttonsbutton", function(){
    return {
        restrict: "E",
        template: "<button addbuttons>Click to add buttons</button>"
    }
});

//Directive for adding buttons on click that show an alert on click
myApp.directive("addbuttons", function($compile){
    return function(scope, element, attrs){
        element.bind("click", function(){
            scope.count++;
            angular.element(document.getElementById('space-for-buttons')).append($compile("<div><button class='btn btn-default' data-alert="+scope.count+">Show alert #"+scope.count+"</button></div>")(scope));
        });
    };
});

//Directive for showing an alert on click
myApp.directive("alert", function(){
    return function(scope, element, attrs){
        element.bind("click", function(){
            console.log(attrs);
            alert("This is alert #"+attrs.alert);
        });
    };
});

score 0 · Answer 3 · answered May 24 '15 at 03:13

in the angular mind you should manipulate the dom from the JS code. and use ng-* directive So i don't know you code but i think you just need to do something like :

View

<button ng-click="showAction()">Show the phone input</button>
<input ng-show="showPhone" ng-model="phone" id="phone">

Controller

app.controller('ctrl', [function(){
  $scope.showPhone = false;

  $scope.showAction = function() {
    $scope.showPhone = true;
  };
}]);

score 0 · Answer 4 · edited May 23 '17 at 12:17

Outside of Angular you would need to use the event handler to recognize new elements that are added dynamically. I don't see enough of your code to test, but here is an article that talks about this with $.on(): Jquery event handler not working on dynamic content

Here is a good article that will help with directives and may solve your problem by creating your own directive: http://ruoyusun.com/2013/05/25/things-i-wish-i-were-told-about-angular-js.html#when-you-manipulate-dom-in-controller-write-directives

Adding an element with directives in Angular

4 Answers4