集成jQuery和AngularJS？

-2

我最近开始用一个提交表单开发一个简单的网页。最初，我使用HTML，CSS和jQuery引导来实现动画元素（定时器，日期选择器，下拉列表和文件上传器）的动画。然后我意识到我想用Angular将我的表单制作成一个多步表单。
一切都很顺利，我设法按照教程来改变我的表单，并通过使用Angular应用程序注入不同的视图。然而，没有一个加载到我的索引页面的Javascript正在工作，因为它们在Angular之前被“加载到DOM上”。
我读了不同的方式来通过创建Angular指令来模拟jQuery元素来解决这个问题。
我想知道解决这个问题的正确方法是什么。似乎人们经常会建议不要使用jQuery和Angular的混合体。在Angular完成所有内容之后，有什么方法可以加载javascripts？或者这是不好的做法，应该避免？集成jQuery和AngularJS？

来源

2015-09-03 Roland Batovski

我个人不建议你将JQuery和Angular结合起来，99％的JQuery功能ty可以使用Angular或普通的旧Javascript。如果你真的需要JQuery，你可以使用ocLazyLoad在你需要时加载js文件https://oclazyload.readme.io/docs – stackg91

你问的问题可能更适合同事，顾问或论坛; SO针对的是具体答案的实际问题。 - 如果你有一个实际的具体问题，我建议创建一个实际的最小复制代码来解释你的情况，并告诉我们解决这个问题有什么问题。 – Jeroen

我昨天看着ocLazyLoad，看起来很有趣。我没有完全设法加载模块，因为它给一个错误带来了一个非常无益的信息，所以我最终放弃了。你会建议使用AngularUI引导而不是放弃当前的jQuery引导吗？ –

这是一个有效的问题，这是一个新的Angular开发人员经常碰到的常见问题。我们使用jQuery bootstrap来创建多个表单视图。我创建了一个笨蛋来回答你的问题。简而言之，在DOM准备好之前，Angular大部分时间都没有完成渲染/执行代码，快速的方法是将你的代码放在你的控制器的setTimeout中，这样你就可以用你的表单快速操作。一个正确的方法是创建一个指令来操纵你的表单。

http://plnkr.co/edit/l9YmHEO8kMxjZTp92k08?p=preview

angular.module('MyApp',[]).controller('MyCtrl', function($scope){ 
    $scope.data = ['aaa','bbb','ccc'];  

    var count = $('#list li').length; 
    $('#beforeTimeout').text('there are ' + count + ' items'); 

    // now the items are rendered 
    setTimeout(function(){ 
     var count = $('#list li').length; 
     $('#afterTimeout').text('there are ' + count + ' items'); 
    },1); 
});

来源

2015-09-03 15:30:33 Lance

我不认为'setTimeout（...）'与'_Angular没有完成在DOM就绪之前渲染/执行代码“，它是恕我直言，让[渲染线程赶上]（http://stackoverflow.com/questions/779379/why-is-settimeoutfn- 0 - 有时很有用）（你可以运行你的例子，超时设置为0）。 – mrak

非常感谢Lance :)我实际上决定完全放弃jQuery，并使用AngularUI作为我需要的指令。我仍然试图让自己的头靠近它，但我认为我慢慢到达那里:)虽然超时是一个有趣的想法：D没有跨过我的脑海 –

Angular包含jQuery Lite，所以你不需要包括一个完整的jQuery。不过，使用jQuery语法取决于您。祝你好运！ – Lance

我不同意@Lance是setTimeout是同步角与jQuery的最佳选择。

Angular中已经有了一个功能，它允许在文档就绪事件之后执行代码。

您可以注入到$document控制器和使用：

$document.ready(function() { ... }

或注入$element：（对于代码1）

angular.element($element).ready(function() { ... }

我分叉@Lance plnkr和更新的例子： http://plnkr.co/edit/NYrcFWTdLtk245BPCX93?p=preview

来源

2015-09-03 16:10:14 mrak

我不同意你的不同意见;）setTimeout是一个快速完成它的方法，我从来没有说过最好的选择。 Angular.element是一个很好的方法来实现这一点。干杯! – Lance

集成jQuery和AngularJS？

回答

相关问题