How can I append some angular elements to a div without doing dom manipulations in the controller?

Question

There is a div with some id say mainDiv. And then there are three buttons. Clicking on each button appends a different angular element with different directives to the mainDiv.

<div id="mainDiv"></div>
<button ng-click="appendSomeElement1ToMainDiv()"></button>
<button ng-click="appendSomeElement2ToMainDiv()"></button>
<button ng-click="appendSomeElement3ToMainDiv()"></button>

How can I achieve this without using dom manipulations in controller. Its too tempting to use

$scope.appendSomeElement1ToMainDiv = function () {
  var element1 = angular.element("<p>I am a new element</p>");
  $("#mainDiv").append(element1);
};

Answer 1

Directives are what you are looking for. You can do something like this:

myApp.directive('mainArea', function() {
    return {
        restrict: "E",
        template: "<div>"+
            "<div id='mainDiv'> </div>" +
            "<button data-ng-click='append()'>Add</button>" +
        "</div>",
        controller: function($scope, $element, $attrs) {
            $scope.append = function() {
                var p = angular.element("<p />");
                p.text("Appended");
                $element.find("div").append(p);
            }
        }
    }
});

And in your HMTL:

<main-area></main-area>

Working Fiddle

If your element is a directive, you should take a look at $compile

Answer 2

If you just need to append certain data on button click, you could have a array on scope which is changed on button click.Bind this model to the view.

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <div id="mainDiv">
            <p ng-repeat="el in elements">{{el}}</p>
        </div>
        <button ng-click="appendSomeElement1ToMainDiv()">b1</button>
        <button ng-click="appendSomeElement2ToMainDiv()">b2</button>
        <button ng-click="appendSomeElement3ToMainDiv()">b3</button>
    </div>
</div>


var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope) {
    $scope.elements = [];
    $scope.appendSomeElement1ToMainDiv = function() {
        $scope.elements.push('el1');
    }
    $scope.appendSomeElement2ToMainDiv = function() {
        $scope.elements.push('el2');
    }
    $scope.appendSomeElement3ToMainDiv = function() {
        $scope.elements.push('el3');
    }
});

Working fiddle http://jsfiddle.net/q3Cgj/