How to add Angular-enabled elements to DOM?

Question

I would like to add some Angular-enabled DOM elements programmatically. Actually, I probably will need to add custom components. How can I do it?

Here\'s a trivial fiddl

Answer 1

Although I am not entirely sure what the desired outcome is, you do want to be sure that all DOM manipulation is done within a directive and not inside your controller.

This JSfiddle example should get you going in the right direction.

http://jsfiddle.net/ZJSz4/5/

    Add
    

angular.module("main", []).controller("MyCtrl", function($scope) {
    $scope.test = 'Test Message';
}).directive("ngPortlet", function ($compile) {
return {
    template: '
{{test}}
   ',
    restrict: 'E',
    link: function (scope, elm) {
        scope.add = function(){
            console.log(elm);
           elm.after($compile('')(scope));
        }
    }
};
});