AngularJS jQuery 共存法则

阅读更多

寻找正确的方法，如何在AngularJS里使用jQuery

 

一、为什么还是要使用jquery

在使用Angular一段时间后，发现还是很难逃脱jquery 插件的魔掌。尽管对于angular，内置了jQLite.
但是为了更好的实现功能，不可避免的要使用一些jquery的插件。

 

二、如何在Angular里使用jquery

1. 如果使用jquery的插件，我们不应该把对应的code放到controller里面。我们应该创建directive，然后通常把jquery的code放在 link里面

2. 当我们引入jquery 插件库的时候，我们要保证是在最后倒入的，在angularjs，controllers，services，filters结束后引入

 

三、实践Plunker

如何在angular里使用jcrop
HTML

  
    
    
    
    
    
    
    
    
  

  
    
Hello 
    Orig
    Kitten

    
  

 

JS

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';  
  $scope.selected = function(x) {
    console.log("selected",x);
  };
});

app.directive('imgCropped', function() {
  return {
    restrict: 'E',
    replace: true,
    scope: { src:'@', selected:'&' },
    link: function(scope,element, attr) {
      var myImg;
      var clear = function() {
        if (myImg) {
          myImg.next().remove();
          myImg.remove();
          myImg = undefined;
        }
      };
      scope.$watch('src', function(nv) {        
        clear();
        if (nv) {
          element.after('');
          myImg = element.next();        
          myImg.attr('src',nv);
          $(myImg).Jcrop({
            trackDocument: true,  
            onSelect: function(x) {              
              scope.$apply(function() {
                scope.selected({cords: x});
              });
            }
          });
        }
      });

      scope.$on('$destroy', clear);
    }
  };
});

 

参考

Correct way to integrate Jquery plugins in Angular.js
An approach to use jQuery Plugins with AngularJS
Use jQuery Plugin With AngularJS the Easy (Lazy) Way

 

 

原文：http://gyf1.com/blog/2014/03/20/angularjs-jquery-%E5%85%B1%E5%AD%98%E6%B3%95%E5%88%99/

本文：AngularJS jQuery 共存法则