새로운 엘리먼트를 생성하는 방법은 아래 코드와 같다.

function(s, e, a) {
    var newElement = angular.element('
<div></div>

');
    e.append(newElement);
    $compile(newElement)(s);
}

여기에 새로 생성되는 엘리먼트에 컨트롤러더 달아주고, ng-click과 같은 기능도 추가해서 만들어 보려고 한다.

일단 html을 아래와 같이 만든다. 

<div ng-app="AngApp">
<div ng-controller="MainCtrl">

Hello {{name}}!

    <my-directive></my-directive>
    </div>
</div>

 이제 my-directive 엘리먼트 안에 새로운 엘리먼트를 만들고 함수 호출도 넣어보자.

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

app.controller('MainCtrl', function($scope) {
    <!-- 기본 컨트롤러 -->
  $scope.name = 'World';
});

app.controller('myDirectiveController', function($scope) {
  $scope.open = function(){
    alert('이거 실행되면 안된다. 새로 생성된 dialogCntl의 scope가 실행되야하기 때문이다.');
  };
});

app.controller('dialogCntl', function($scope) {
  $scope.open = function(){
    alert('정상적으로 생성 및 생성된 엘리먼트안의 ng-click도 정상 작동');
  };
});

app.directive('myDirective', function ($compile) {
    <!-- 디렉티브 해당 엘리먼트 기능 추가 -->
  return {
    restrict : 'E',
    controller : 'myDirectiveController',
    link : function(s, e, a) {
      var newElement = angular.element('
<div ng-controller="dialogCntl">' + '<a ng-click="open()" tabindex="-1" href="#">Result Alert!!</a></div>

');
        <!-- 엘리먼트를 생성하면서 ng-controller와 ng-click 액션도 함께 담아 생성했다.-->
      e.append(newElement);
      $compile(newElement)(s);
    }
  }
})

 제대로 작동하는지 아래 샘플로 확인할 수 있다.

Result 탭을 클릭하여 Result Alert!! 을 눌러 정상적으로 수행되는지 확인해보자.