如何在AngularJS中使用jQuery

如何在AngularJS中使用jQuery

理想情况下，您可以将其放入指令中，但也可以将其放入控制器中。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

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