지시문 삽입(프로그래밍 각도)JS

지시문 삽입(프로그래밍 각도)JS

이벤트를 트리거하고 디렉티브를 컴파일하여 그 자체를 DOM의 위치에 삽입할 수 있도록 하고 싶습니다.저는 지금 이런 걸 가지고 있어요.

//controller
  angular.module('app').controller('MainCtrl', function ($scope, $compile) {

    $scope.$on('insertItem',function(ev,attrs){
      var el = $compile( "<chart></chart>" )( $scope );
      $scope.insertHere = el;
    });

  });


// directive
 angular.module('app')
  .directive('chart', function () {
    return {
      template: '<div>My chart</div>',
      restrict: 'E',
      link: function postLink(scope, element, attrs) {
        element.text('this is a chart');
      }
    };
  });

필요한 모든 것을 가지고 "el"이라는 물체를 볼 수 있지만 DOM에 삽입할 수 없습니다. 단서는 없습니까?

먼저 dom 요소를 작성한 후 컴파일하여 문서에 추가해야 합니다.다음과 같은 경우:

$scope.$on('insertItem',function(ev,attrs){
  var chart = angular.element(document.createElement('chart'));
  var el = $compile( chart )( $scope );

  //where do you want to place the new element?
  angular.element(document.body).append(chart);

  $scope.insertHere = el;
};

여기에 간단한 예를 작성했습니다.http://plnkr.co/edit/n7SZpyeQ9nbjVSYA7ibB?p=preview

언급URL : https://stackoverflow.com/questions/16656735/insert-directive-programmatically-angularjs