angularjs – 以编程方式角度插入指令

前端之家收集整理的这篇文章主要介绍了angularjs – 以编程方式角度插入指令前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
所以我基本上希望能够触发一个事件然后有一个指令编译并将其自身插入到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',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

原文链接:https://www.f2er.com/angularjs/143515.html

猜你在找的Angularjs相关文章