After developing a custom directive to dynamically include various form fields, I encountered an issue where the ng-model gets duplicated when more than one directive-based field is added. As someone new to working with directives, any assistance would be greatly appreciated.
var app = angular.module('app', []);
angular.module('app').controller('MainCtrl', function ($scope, $compile) {
$scope.add = function(ev,attrs){
var iact = angular.element(document.createElement('itemactivo'));
var el = $compile( iact )( $scope );
//where do you want to place the new element?
angular.element(document.body).append(iact);
$scope.insertHere = el;
};
});
// directive
angular.module('app')
.directive('itemactivo', function () {
return {
templateUrl: 'itemactivo.html',
restrict: 'E',
link: function postLink(scope, element, attrs) {
}
};
});
A plunker showcasing the issue can be accessed here: