La directiva ng-Jq permite forzar la biblioteca utilizada por angular.elementbiblioteca. El forzado de jQLite debe ocurrir cuando dejamos ng-jq en blanco; de lo contrario, establezca el nombre de la variable jquery debajo de la ventana (por ejemplo, jQuery). jQLite está integrado directamente en AngularJS y es un subconjunto importante de jQuery. De forma predeterminada, AngularJS usa jQLite. AngularJS observa esta directiva cuando necesita cargarse, y no espera el evento DOMContentLoaded en absoluto. Debe colocarse en el elemento que aparece antes de pasar al script que es responsable de liderar el angular. Además de la directiva ngApp, si agrega la directiva ng-jq, puede especificar el nombre de jQuery que estará disponible en la ventana, lo que será extremadamente crucial cuando vaya a usar jQuery con una variable de alias.
Nota: AngularJS solo utilizará la primera instancia de la directiva ng-jq, mientras que todas las demás serán ignoradas. Use jQuery para cargar la biblioteca jQuery antes de cargar AngularJS, luego angular omitirá jQLite y comenzará a usar la biblioteca jQuery.
Sintaxis:
<element [ng-jq="string"]> ... </element>
o
<element ng-jq="string"></element>
Parámetros: contiene un solo parámetro ng-jq, que es opcional. El nombre de la biblioteca debe especificarse debajo de la ventana para usar para angular.element.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
AngularJS ng-jq Directive
</title>
<script data-require="jquery@2.1.3" data-semver="2.1.3"
src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script>
var jQuery_2_1_3 = $.noConflict(true);
</script>
<script data-require="angular.js@1.4.0-rc.0" data-semver="1.4.0-rc.0"
src="https://code.angularjs.org/1.4.0-rc.0/angular.js"></script>
<script>
angular.module('ngAppTest', [])
.controller('MainCtrl', function() {
this.isUsingJQuery =
angular.element.toString().indexOf('jQuery') !== -1;
})
</script>
</head>
<body style="text-align:center;" ng-app="ngAppTest"
ng-jq="jQuery_2_1_3" ng-controller="MainCtrl as vm">
<h2 style="color:green">GeeksForGeeks</h2>
<h2 style="color:purple">ng-jq Directive</h2>
<p>is using jQuery : {{ vm.isUsingJQuery }}</p>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por SohomPramanick y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA