How to bind a jQuery event to dynamic content with AngularJS

Question

Basically in my controller, I'm doing an $http.get() to load some html to set a "current view". My issue is that I can't figure out how to rebind the the jQuery event with this new dynamic content.

Right now, I've resorted to somethign like this:

$http.get('/someurl', {}).success(function(data){
  $scope.detailedView = data;
  // Now here comes the rebinding
  setTimeout(function(){
    // Use jquery to bind the new content
  }, 1500);
});

I've been looking for a solution, and anything related that I've found points to using a directive. I've looked into this, but I do not know how a directive would be used for something like this.

Note without the timeout, the bindings run before the dynamic content is actually in the DOM. I've also tried finding something that would be similar to hooking into something after the $apply would run but have not found anything similar.

Answer 1

First should see if what you are doing with jQuery can't be done using angular.

Here's the most simplistic version of a directive that can be used:

<div ng-repeat="item in items" my-directive>Item {{$index+1}}</div>

app.directive('myDirective', function ($timeout) {
    return function (scope, element, attrs) {
        $timeout(function () {
            /* element is a jQuery object when jQuery loaded in page before angular,*/
            /* otherwise is a jQlite object that has many of same methods as jQuery*/
            element.css({ 'border': '1px solid green', 'margin': '10px 30px','padding':'5px'});
        }, 0);
    }
 });

Here's a demo that uses a long timeout to generate data for repeated items that use the directive:

http://jsfiddle.net/AXYGL/