Best IT Recipes

How to add DOM Elements (Angular directives) via jQuery.append ()?

Is there a way to add an element that is an Angular directive using jQuery methods like append() and Angular to make my compilation / link so that it works as if you included the directive in the first place?

Example:

 app.directive('myAngularDirective', [function () { ... // Lots of stuff in here; works when used normally but not when added via jQuery }); $("body").append("<my-angular-directive />");

Currently, it simply adds an empty DOM element called "my-angular-directive", but Angular does not use or do its magic.

+46
jquery angularjs
Nov 18 '13 at 22:24
source share
6 answers

The correct way is to use: $ compile , and if your directive returns: directive definition object (which, by the way, is recommended for you) can then call the link function on it (for example, to enter scope ).

 $('body').append($compile("<my-angular-directive />")(scope)); scope.$apply();
+65
Nov 18 '13 at 22:37
source share

Full example from Angular documentation :

 // Angular boilerplate var app = angular.module("myApp", []); app.controller("MyCtrl", function($scope) { $scope.content = { label: "hello, world!", }; }); // Wrap the example in a timeout so it doesn't get executed when Angular // is first started. setTimeout(function() { // The new element to be added var $div = $("<div ng-controller='MyCtrl'>new: {{content.label}}</div>"); // The parent of the new element var $target = $("[ng-app]"); angular.element($target).injector().invoke(function($compile) { var $scope = angular.element($target).scope(); $target.append($compile($div)($scope)); // Finally, refresh the watch expressions in the new element $scope.$apply(); }); }, 100); 
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div ng-app="myApp"> <div ng-controller="MyCtrl">old: {{content.label}}</div> </div>
+15
Aug 6 '15 at 1:01
source share

Ideally, you should avoid this.

However, if you really need to, then you can enter and use the $compile service, followed by element.append .

If your directive does not need access to a specific area, then you can even assign the $compile and $rootScope window $rootScope in the run function of your application module, and then use them externally from the angular context, creating a new scope ( $rootScope.new() ) and complete adding an item using $rootScope.apply() .

+2
Nov 18 '13 at 22:38
source share

You really want to avoid executing any jquery if you can, but I ran into a similar problem not so long ago, here was my question and the correct answer, which should be able to help you. The short answer is to use $ compilation.

+1
Nov 18 '13 at 22:39
source share

The accepted answer did not give a complete example, here is one:

https://codepen.io/rhinojosahdz/pen/ZpGLZG

 <body ng-app="app" ng-controller="Ctrl1 as ctrl1"> </body> <script> angular.module('app',[]) .controller('Ctrl1', ['$scope', '$compile', function($scope, $compile){ var vm = this; vm.x = 123; $('body').append($compile("<hola x='ctrl1.x' />")($scope)); }]) .directive('hola', function(){ return { template: '<div ng-click="vm.alertXFromGivenScope()">click me!</div>' ,scope: { x : '=' } ,controller: function(){ var vm = this; vm.alertXFromGivenScope = function(){ alert(vm.x); }; } ,controllerAs: 'vm' ,bindToController: true } }) <script>
+1
Sep 07 '16 at 15:35
source share

try it

 angular.element($("#appendToDiv")).append($compile("<my-angular-directive />")($scope));
0
Apr 27 '17 at 10:19 on
source share


More articles:


All Articles