如何使用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); } });
这是一个使用长超时为使用该指令的重复项生成数据的演示: