AngularJS ng-jq指令

AngularJS中的ng-Jq指令允许强制使用angular.element库的库。强制使用jQLite应该发生在我们把ng-jq留空的时候，否则就在窗口下设置jquery变量的名称（例如jQuery）。jQLite直接内置于AngularJS中，是jQuery的一个重要子集。默认情况下，AngularJS使用jQLite。当AngularJS需要加载时，这个指令会被关注，而且它根本不需要等待DOMContentLoaded事件。它应该在进入负责引导Angular的脚本之前被放置在出现的元素上。除了ng-app指令，如果你添加ng-jq指令，你可以指定jQuery的名称，这将在窗口下可用，当你要使用jQuery的别名变量时，这将是非常关键的。

注意：只有ng-jq指令的第一个实例会被AngularJS使用，而其他的都会被忽略。在加载AngularJS之前使用jQuery来加载jQuery库，那么Angular将跳过jQLite，开始使用jQuery库。

语法：可以使用ng-jq指令。

作为一个元素。

<ng-jq [ng-jq="string"]>
    Content...
</ng-jq>

作为一种属性。

<element [ng-jq="string"]>
    Content...
</element>

参数值：它包含一个参数ng-jq，这是可选的。必须在窗口下指定库的名称，以用于angular.element。

例子：这个例子描述了AngularJS中**ng-jq指令的使用，通过检查jQuery的存在。

<!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">
  
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3 style="color:purple">ng-jq Directive</h3>
    <p>is using jQuery : {{ vm.isUsingJQuery }}</p>
</body>
  
</html>