If you want to clone an input for example, you can do the following by creating a directive :
Directive
(function(){
function clone($compile) {
return {
restrict: "A",
link: function(scope, element, attrs) {
//Retrieve and create angular element
var elm = angular.element(element[0]);
//Add event listener for a focus event
elm.on('focus', function(){
//Create newElm by copying our elm
var newElm = $compile(elm.clone())(scope);
//Emit event clone with the clone elm
scope.$emit('clone', newElm);
});
}
};
}
angular
.module('app')
.directive('clone', clone);
})();
Then how send your clone data to your Controller ? By using $emit and $on.
Then with $emit you will be able to dispatch event from child controller to scopes upwards.
With $on, you will be able to listen a specific event, and retrieve the data which will be passed in the $emit.
Controller
(function(){
function Controller($scope) {
//Listen for a clone event
$scope.$on('clone', function(event, data){
//Here data is your cloned input
//print my clone input
console.log(data);
});
}
angular
.module('app', [])
.controller('ctrl', Controller);
})();
And apply the direcive to your HTML element :
HTML
<input type="text" class="form-control" name="mobile[]" clone />
