jquery-plugins angular.element - Manera correcta de integrar los complementos de jQuery en AngularJS




example 1.5 (3)

Sí, estás en lo correcto. Si está utilizando un complemento jQuery, no coloque el código en el controlador. En su lugar, cree una directiva y coloque el código que normalmente tendría dentro de la función de link de la directiva.

Hay un par de puntos en la documentación que puede echar un vistazo. Usted puede encontrarlos aquí:
Errores comunes

Usando los controladores correctamente

Asegúrese de que cuando haga referencia al script en su vista, haga referencia al último, después de que se haga referencia a la biblioteca, controladores, servicios y filtros de angularjs.

EDITAR: En lugar de usar $(element) , puede usar angular.element(element) cuando usa AngularJS con jQuery

Me preguntaba cuál es la forma correcta de integrar los complementos de jQuery en mi aplicación angular. He encontrado varios tutoriales y capturas de pantalla, pero parecen dirigidos a un complemento específico.

Por ejemplo: http://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/ http://www.youtube.com/watch?v=8ozyXwLzFYs

¿Debo crear una directiva como tal?

App.directive('directiveName', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).'pluginActivationFunction'(scope.$eval(attrs.directiveName));
        }
    };
}); 

¿Y luego en el html llamar al script y la directiva?

<div directiveName ></div>
<script type="text/javascript" src="pluginName.js"></script>

Gracias por adelantado


Tengo alreay 2 situaciones donde las directivas y los servicios / fábricas no funcionaron bien.

el escenario es que tengo (tuve) una directiva que tiene la inyección de dependencia de un servicio, y de la directiva le pido al servicio que realice una llamada ajax (con $ http).

al final, en ambos casos la repetición ng no se archivó en absoluto, incluso cuando le di un valor inicial a la matriz.

Incluso intenté hacer una directiva con un controlador y un alcance aislado

Solo cuando moví todo a un controlador y funcionó como magia.

Ejemplo de esto aquí Inicializando el complemento jQuery (RoyalSlider) en Angular JS


parcial

  <div class="col-md-4 text-right">
      <a ng-class="campaign_range === 'thismonth' ? 'btn btn-blue' :  'btn btn-link'" href="#" ng-click='change_range("thismonth")'>This Month</a>
      <a ng-class="campaign_range === 'all' ? 'btn btn-blue' :  'btn btn-link'" href="#" ng-click='change_range("all")'>All Time</a>
  </div>

controlador

  $scope.campaign_range = "all";
  $scope.change_range = function(range) { 
        if (range === "all")
        {
            $scope.campaign_range = "all"
        }
        else
        {  
            $scope.campaign_range = "thismonth"
        }
  };




jquery-plugins angularjs