Question

我需要在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

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

<div bootstrapswitch></div>

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

<div class="make-switch" ng-repeat="item in items" bootstrapswitch></div>

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

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

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

Answer 2

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

顺便说一句，直接在像$("selector").method()这样的角度代码中调用jQuery是一种不好的做法。您应该只使用角度jqLite功能

Answer 3

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

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

在AngularJS控制器中使用jQuery函数

3 个答案: