Adding an element with directives in Angular
I am adding an element dynamically in Angular. The code looks like this.
myelement.after('<input ng-model="phone" id="phone">');
The item is added and everything works fine. However, I think I am 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 undefined.
The reason for adding an item on the fly is that the number of entries is unknown from the start and the user can add as many of them as he wants. The actual code looks like this:
myelement.after('<input ng-model="phone"' + counter + ' id="phone' + counter + '">');
Sorry, I had to provide a complete sample from the beginning. See the following jsfiddle, add some phones (with values) and list them: http://jsfiddle.net/kn47mLn6/4/
And note that I am not creating any new directive. I only use the standard Angular directives and I prefer not to create a custom directive for this to work (unless required).
source to share
Assuming you are adding an element to a DOM directive. You can use the built-in angular compiler service $. First put the compile command in your directive. Then in your link function from the directive, get your myElement after which you want to add your element. Then create your element using angular.element (). Then compile it with a compile service and pass the scope you are in now (that scope is the scope here). After you get the compiled dom element, you can simply add it after your myElement.
Here's an example of how you can dynamically add an element from a 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 to your directive, angular will recognize your dynamically added element.
source to share
I've tried to accomplish this without using directives, but it seems the best way (and probably the only correct way) to add multiple elements to the DOM in Angular is by defining a custom directive.
I found a very good 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);
});
};
});
source to share
in angular mind, you have to manipulate dom from JS code. and use the ng- * directive So I don't know how 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;
};
}]);
source to share
Outside Angular, you will need to use an 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 it with $ .on (): JQuery event handler doesn't work with dynamic content
Here is a good article to help with directives and might 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
source to share