Вмъкнете директива програмно 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... някакви улики?


person climboid    schedule 20.05.2013    source източник
comment
Възможен дубликат на Директива за динамично добавяне в AngularJS   -  person Castro Roy    schedule 29.07.2016


Отговори (1)


Първо трябва да създадете 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

person joakimbl    schedule 20.05.2013
comment
Как бих осъществил достъп до $compile, ако създавах елемента извън Angular? - person Hengjie; 23.10.2013
comment
Здравейте, бихте ли предоставили идеи за моя нов предложен API, за да направя програмното добавяне на директиви по-прост процес? github.com/angular/angular.js/issues/6950 Благодаря! - person trusktr; 05.04.2014
comment
@Hengjie Трябва да компилира елемента по отношение на определен обхват (вътре в ъглов). Няма директиви извън ъгловите. Директивите са обвързани с обхвати във вашето приложение. Като алтернатива можете да използвате jQLite вътре в angular и да правите манипулатори на събития по този начин (angular.element('body')). - person Kevin Beal; 04.06.2014
comment
това нормална практика ли е или се счита за противопоставяне на ъгловата зърнистост? - person FlavorScape; 13.06.2014
comment
Определено се чувства, че е против Angular начините, въпреки че алтернативата не е по-красива. По принцип лениво задействах ng-include в зависимост от събитие и оставих ng-include да се справи с компилацията и свързването вместо мен. Ако някой се интересува, мога да изровя кода и да го добавя като отговор. - person Hengjie; 14.06.2014
comment
hengije, моля, направете го. Това би било много полезно. - person schlingel; 10.02.2015
comment
Не е необходимо да определяте зависимостите на директивата, която създавате, нито да ги инжектирате. Примерът тук въвежда зависимост от фабрика 'f', но аз продължавам да използвам кода на @joakimbl, който просто се компилира като това ` $compile( chart )( $scope );` - person The Red Pea; 08.11.2016
comment
Би било хубаво да актуализирате отговора със случай, че директивата има някакви атрибути, които трябва да бъдат предоставени. - person Vojtech Ruzicka; 18.11.2016
comment
Някой има ли пример за $scope.insertHere? Опитвам се да реферирам променлива като тази и просто получавам нещо подобно на {context:"0"}. Нямам точния код пред себе си. - person Bryant Jackson; 26.05.2017