コンパイル - angularjs ディレクティブ link



プログラムでAngularをつけてディレクティブを挿入する (1)

ですから、私は基本的にイベントをトリガーしてから、ディレクティブをコンパイルして、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 : http://plnkr.co/edit/n7SZpyeQ9nbjVSYA7ibB?p=preview





angularjs-directive