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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。