How to apply an AngularJS directive to ajax content?

Question

I know I can apply to the template/templateURL, but currently the content will load from another place in my application.

JSbin: http://jsbin.com/imuseb/1/

HTML

<html ng-app="app">
  <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>

  </head>
  <body>

    <div alert>here</div>

  </body>
</html>

JS code:

var app = angular.module('app', []);

app.directive('alert', function (){
  return {
    link: function (scope, element, attrs) {
      element.on("click", function (){
        alert("here");
      });
    }
  };
});


$(function (){
   $("body").append("<div alert>here too</div>");
});

What did you try so far? Can you provide some sample code?

tschiela
– tschiela

2013-05-22 20:54:16 +00:00
Commented May 22, 2013 at 20:54 — tschiela
– tschiela, Commented May 22, 2013 at 20:54

Dan · Accepted Answer · 2013-05-22 22:23:23Z

3

The new DOM must be accessible to the angular app in order to be compiled correctly. Here is one way to do this (not the only way). For applying the new DOM to the app's $rootScope, change this:

$(function (){
    $("body").append("<div alert>here too</div>");
});

to:

app.run(function($rootScope){
    $rootScope.$apply($("body").append("<div editable>here too</div>"));
});

According to the Angular docs:

$apply() is used to execute an expression in angular from outside of the angular framework. (For example from browser DOM events, setTimeout, XHR or third party libraries).

edited May 22, 2013 at 22:23

answered May 22, 2013 at 22:08

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mariz Melo Over a year ago

Thanks sh0ber. I discovered that you can also use $compile... like this: $compile($("body").append("<div alert>here too</div>"))($scope);

RPDeshaies Over a year ago

What is the difference between using $apply and $compile in the context of the app.run() ? Thanks

Chris Krycho · Accepted Answer · 2014-12-09 19:16:37Z

0

It would be best if you could load your extra content from within the angular framework. Check out ng-include.

If that can't be used to do what you need, you'll have to manually call the angular compile service on the element, to compile it and link it onto the scope yourself using $compile.

Compiling elements touches the DOM, and therefore should be done within a custom directive if possible.

edited Dec 9, 2014 at 19:16

Chris Krycho

3,1651 gold badge26 silver badges35 bronze badges

answered May 22, 2013 at 22:07

Jmr

12.1k4 gold badges41 silver badges33 bronze badges

Collectives™ on Stack Overflow

How to apply an AngularJS directive to ajax content?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related