angularjs – 插入指令编程角

发布时间：2020-12-17 08:48:53 所属栏目：安全来源：网络整理

导读：所以我基本上想要能够触发一个事件，然后进行深刻的编译，并将其自我插入到DOM中的位置。目前我有这样的东西 //controller angular.module('app').controller('MainCtrl',function ($scope,$compile) { $scope.$on('insertItem',function(ev,attrs){ var el

所以我基本上想要能够触发一个事件，然后进行深刻的编译，并将其自我插入到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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!