AngularJS ng-jq用法及代码示例

ng-Jq指令允许强制由angular.element库使用的库。当我们将ng-jq保留为空白时，应该发生jQLite的强制，否则应在窗口下设置jquery变量的名称(例如jQuery)。 jQLite直接内置在AngularJS中，是jQuery的重要子集。默认情况下，AngularJS使用jQLite。当需要加载该指令时，AngularJS会查看该指令，而根本不等待DOMContentLoaded事件。在执行负责引导角度的脚本之前，应将其放置在出现的元素上。除了ngApp指令外，如果添加ng-jq指令，还可以指定将在窗口下可用的jQuery名称，当您将jQuery与别名变量一起使用时，这将是至关重要的。

注意：AngularJS将仅使用ng-jq指令的第一个实例，而所有其他实例将被忽略。在加载AngularJS之前，先使用jQuery加载jQuery库，然后angular将跳过jQLite并开始使用jQuery库。

用法:

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

或者

<element ng-jq="string"></element>

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

Example:

<!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>

输出：
ngcut

相关用法

注：本文由纯净天空筛选整理自SohomPramanick大神的英文原创作品 AngularJS | ng-jq Directive。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。