如何在 AngularJS 中使用 jQuery

Posted 2023-02-19

【中文标题】如何在 AngularJS 中使用 jQuery

【英文标题】：How to use jQuery in AngularJS

【发布时间】：2014-05-05 04:01:22

【问题描述】：

我正在尝试使用简单的 jQuery UI。我已经包含了所有内容，并且有这个简单的脚本：

<script>
  $(function() 
    $( "#slider" ).slider();
  );
</script>

和

<div id="slider"></div>

我的包括：

<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/ayaSlider.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>

但是当我打开页面时没有滑块。根据角度的文档：

如果 jQuery 可用，则 angular.element 是 jQuery 的别名 功能。如果 jQuery 不可用，则 angular.element 委托给 Angular 内置的 jQuery 子集。

但是，我不太明白如何使用angular.element，也没有示例。

更新：我设法在屏幕上显示了滑块，但它不起作用，我无法更改值或对其进行操作。

【问题讨论】：

如果你包含了jQuery，你可以正常使用它。您的控制台中是否出现任何错误？

当 dom 准备好时执行 .slider()

@Dreamwalker，提问者已经这样做了。

@user，还请记住，jQuery UI 需要包含 CSS 文件才能正常工作。仔细检查您是否已将该文件包含在您的页面中。

@Nick 不，我没有收到任何错误。我用我的包含列表更新了帖子。

【参考方案1】：

理想情况下，您可以将其放入指令中，但您也可以将其放入控制器中。 http://jsfiddle.net/tnq86/15/

  angular.module('App', [])
    .controller('AppCtrl', function ($scope) 

      $scope.model = 0;

      $scope.initSlider = function () 
          $(function () 
            // wait till load event fires so all resources are available
              $scope.$slider = $('#slider').slider(
                  slide: $scope.onSlide
              );
          );

          $scope.onSlide = function (e, ui) 
             $scope.model = ui.value;
             $scope.$digest();
          ;
      ;

      $scope.initSlider();
  );

指令方法：

html

<div slider></div>

JS

  angular.module('App', [])
    .directive('slider', function (DataModel) 
      return 
         restrict: 'A',
         scope: true,
         controller: function ($scope, $element, $attrs) 
            $scope.onSlide = function (e, ui) 
              $scope.model = ui.value;
              // or set it on the model
              // DataModel.model = ui.value;
              // add to angular digest cycle
              $scope.$digest();
            ;
         ,
         link: function (scope, el, attrs) 

            var options = 
              slide: scope.onSlide  
            ;

            // set up slider on load
            angular.element(document).ready(function () 
              scope.$slider = $(el).slider(options);
            );
         
      
  );

我还建议查看 Angular Bootstrap 的源代码： https://github.com/angular-ui/bootstrap/blob/master/src/tooltip/tooltip.js

您也可以使用工厂来创建指令。这为您提供了极大的灵活性，可以围绕它集成服务以及您需要的任何依赖项。

【讨论】：

使用 jQuery 并不一定意味着事情会变得一团糟，这通常是由于代码结构不佳。理想情况下，您希望使用所需的任何内容在服务中构建 api，然后在指令中调用这些方法。

angular.element(document).ready(function () scope.$slider = $(el).slider(options); );为我做了伎俩。谢谢

在 angular4 中会怎样？

【参考方案2】：

这应该可以工作。请看this fiddle。

$(function() 
   $( "#slider" ).slider();
);//Links to jsfiddle must be accompanied by code

确保按以下顺序加载库：jQuery、jQuery UI CSS、jQuery UI、AngularJS。

【讨论】：

您没有按该顺序加载库。我想你需要/想要在 jQuery 之前加载角度和依赖项

@user23236245242 据我所知，小提琴显示了您想要的内容。加上here 我将AngularJS 添加到外部资源，它工作正常。看看源代码here。

我的意思是“您发布的代码应该可以工作”，前提是您以正确的顺序加载库。

这既简单又好...为什么不使用这种技术而不是复杂的公认技术呢？

【参考方案3】：

您必须在指令中进行绑定。看看这个：

angular.module('ng', []).
directive('sliderRange', function($parse, $timeout)
    return 
        restrict: 'A',
        replace: true,
        transclude: false,
        compile: function(element, attrs)             
            var html = '<div class="slider-range"></div>';
            var slider = $(html);
            element.replaceWith(slider);
            var getterLeft = $parse(attrs.ngModelLeft), setterLeft = getterLeft.assign;
            var getterRight = $parse(attrs.ngModelRight), setterRight = getterRight.assign;

            return function (scope, slider, attrs, controller) 
                var vsLeft = getterLeft(scope), vsRight = getterRight(scope), f = vsLeft || 0, t = vsRight || 10;                        

                var processChange = function() 
                    var vs = slider.slider("values"), f = vs[0], t = vs[1];                                        
                    setterLeft(scope, f);
                    setterRight(scope, t);                    
                                 
                slider.slider(
                    range: true,
                    min: 0,
                    max: 10,
                    step: 1,
                    change: function()  setTimeout(function ()  scope.$apply(processChange); , 1) 
                ).slider("values", [f, t]);                    
            ;            
        
    ;
);

这向您展示了一个使用 jQuery UI 完成的滑块范围示例。用法示例：

<div slider-range ng-model-left="question.properties.range_from" ng-model-right="question.properties.range_to"></div>

【参考方案4】：

最好的选择是创建一个指令并将滑块功能包装在那里。 秘诀是使用$timeout，只有在DOM准备好时才会调用jquery代码。

angular.module('app')
.directive('my-slider', 
    ['$timeout', function($timeout) 
        return 
            restrict:'E',
            scope: true,
            template: '<div id=" id "></div>',
            link: function($scope) 
                $scope.id = String(Math.random()).substr(2, 8);

                $timeout(function() 
                    angular.element('#'+$scope.id).slider();                    
                );
            
        ;
    ]
);