在AngularJS控制器中使用jQuery函数

我需要在所有带有某个类名的元素上初始化一个jQuery插件，该类名在ng-repeat循环中。 这些元素通过angularjs $http get方法加载。

 var app = angular.module('myApp', []); app.controller('myController', function($scope, $http) { $http.get('get_item.php').success(function(response) { $scope.items = response; angular.element('.make-switch').bootstrapSwitch(); // jQuery plugin code }); }); 

但这不起作用。 我试过$('.make-switch').bootstrapSwitch(); 也。 请帮忙。

Answer 1

创建一个指令，这样您就可以在标记中初始化插件：

我认为你使用范围变量$scope.items动态创建元素，类似于：

…只需添加属性bootstrapswitch即可初始化已加载元素的开关。

……你的指令看起来像那样：

 app.directive('bootstrapswitch', [function() { return { restrict: 'A', link: function(scope, elem, attrs) { $(elem).bootstrapSwitch(); } }; }]); 

Answer 2

实际上，如果你想在角度代码中调用任何jQuery插件，你也可以使用angular进行调用。 它内置了jQuery，名为jqLit​​e，您可以将其称为angular.element("selector") ，它返回一个jQuery元素。 作为选择器，您可以使用任何您喜欢的jQuery / css选择器。

顺便说一句，直接在角度代码中调用jQuery，如$("selector").method()是一种不好的做法。 您应该只使用角度jqLit​​efunction

Answer 3

使用Angular控制器中的jQuery库来操作视图并不是一个好主意。 实际上jQuery是基于事件抓取或注入你的DOM。但是Angular的行为方式不同，它基于真/假的性质来操纵视图。

最好的替代方法是尝试制作指令或使用angular-bootstrap-switch库。