How to add DOM element (with controller) into AngularJS scope dynamically

Question

I am trying to build an application (using AngularJS) which allows me to drag a complex HTML element which MAY include angular controller calls from a palette into a div.

The drag/drop portion is working, however I am not able to get the element clone into the scope.

I have a JSFiddle demonstrating the problem here: http://jsfiddle.net/gdharley/h4AcC/

Basically, when the element is dropped, I am emitting an event that is picked up by the mainController.

$scope.$on('my-created', function (ev, val) {
    $scope.items.splice(val.to, 0, {
        name: val.name
    });
    var myInjector = angular.injector(["ng", "plunker"]);
    var $compile = myInjector.get("$compile"); // retrieve the compile service
    var fnLink = $compile(val); // returns a Link function used to bind element to the scope
    fnLink($scope);
})

I am then retrieving the compile service from the injector and compiling he element into the scope.

While no errors are thrown, the clone of the element is not functional (ie adding contacts does not appear to call the add() function in the controller.

Any help appreciated. Thanks. Greg

Answer 1

No, you don't put things in the DOM with your controller. You do it in a directive. Even then, you don't need any of that. Just have your "add()" function add things to your model and use ng-repeat to output more.

Everything you're doing should be based around changing a model. It's hard for me to understand exactly what you're trying to achieve, but the result of a drag-drop should modify your model and angular can react based on watches or emits, but you shouldn't be compiling anything manually most of the time.

If you do need to compile do it inside your directive, not your controller. Just inject the $compile service and call it that way.