如何使用AngularJS将jQuery事件绑定到动态内容

基本上在我的控制器中,我正在做$http.get()来加载一些html来设置“当前视图”。 我的问题是我无法弄清楚如何使用这个新的动态内容重新绑定jQuery事件。

现在,我已经采取了这样的方式:

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

我一直在寻找一个解决方案,我找到的任何相关内容都指向使用指令。 我已经调查了这个,但我不知道如何将指令用于这样的事情。

注意没有超时,绑定在动态内容实际在DOM中之前运行。 我也试过找到一些类似于在$ apply运行之后挂钩但却没有找到类似内容的东西。

首先应该看看你用jQuery做什么是不能用angular做的。

这是可以使用的最简单的指令版本:

 
Item {{$index+1}}
 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); } }); 

这是一个使用长超时为使用该指令的重复项生成数据的演示:

http://jsfiddle.net/AXYGL/