ホームページ > 記事 > ウェブフロントエンド > AngularJS ディレクティブの使用方法? Angularjs 命令の使用法の詳細 (コード例付き)
AngularJS ディレクティブの使用方法? Angularjs 命令の使用法の詳細 (コード例付き)
- 寻∝梦オリジナル
- 2018-09-08 16:37:561140ブラウズ
この記事では主に angularjs に関する命令例を紹介します 1 つ目は angularjs でのアコーディオン命令インスタンスの使用方法であり、その命令についても一緒に見ていきましょう
angularjs について:
以前に AngularJS の基礎知識をすべて紹介しましたが、例を通して記憶を深め、カスタム命令の楽しさを体験してみましょう。
Accordion コマンド
最初に示す例は、アコーディオン効果コマンドです:
レンダリングは次のとおりです:
オンライン インスタンス アドレス: Accordion コマンド
AngularJS を含まない純粋な HTML ソース コードは次のとおりです:
<p> </p><p> </p><p> <a> Collapsible Group Item #1 </a> </p> <p> </p><p> Anim pariatur cliche... </p> <p> </p><p> <a> Collapsible Group Item #2 </a> </p> <p> </p><p> Anim pariatur cliche... </p>
上記の純粋な HTML ソース コードでもアコーディオン効果を実現できますが、これは単なるタグであり、多数のリンクと ID が含まれているため、メンテナンスには役立ちません。
次の HTML ソース コードと組み合わせて AngularJS カスタム命令を使用すると、期待どおりの結果が得られます:
<h3>BootStrap手风琴指令</h3>
<btst-accordion>
<btst-pane>基本功能" category="{name:'test'}">
<p>AngularJS......</p>
</btst-pane>
<btst-pane>创建自定义指令">
<p>使用过 AngularJS ......</p>
</btst-pane>
<btst-pane>体验实例">
<p>之前我们已经介绍了所有的AngularJS......</p>
</btst-pane>
</btst-accordion>
このバージョンでは、使用する HTML タグが少なく、明確で保守が簡単です。
それでは指示書の書き方を見ていきましょう。
まず、モジュール「btstAccordion」ディレクティブを定義します。
var btst = angular.module("btst", []);
btst.directive("btstAccordion", function () { return {
restrict: "E",
transclude: true,
replace: true,
scope: {},
template:
"<p></p>",
link: function (scope, element, attrs) { // 确保 accordion拥有id
var id = element.attr("id"); if (!id) {
id = "btst-acc" + scope.$id;
element.attr("id", id);
} // set data-parent and href attributes on accordion-toggle elements
var arr = element.find(".accordion-toggle"); for (var i = 0; i <p></p><p>これには内部 HTML コンテンツがあるため、ディレクティブの transclude 属性を true に設定します。テンプレートは、ng-transclude ディレクティブを使用して、対応する表示コンテンツを宣言します。テンプレートには要素が 1 つしかないため、他のオプションは設定されません。 </p><p> コードの最も興味深い部分はリンク メソッドです。パラメーター要素に ID がある場合に有効になります。ID がない場合は、命令のスコープに基づいて ID が自動的に作成されます。要素に ID 値が設定されると、メソッドは jQuery を使用して「accordion-toggle」クラスを持つ子要素を選択し、その「data-parent」属性と「href」属性を設定します。最後に、「accordion-body」要素を探して「collapse」属性を設定します。 </p><p> ディレクティブは、空のメソッドを持つコントローラーも宣言します。アコーディオンには子要素が含まれており、親要素の型とコントローラを検出するため、コントローラの宣言が必要です。 </p><h2>次のステップは、アコーディオンタブの命令を定義することです。 </h2><p>このステップは簡単で、ほとんどの操作はこのテンプレートで行われますが、必要なコードはほんの少量です: </p><p class="cnblogs_code" style="background-color:#f5f5f5;border:#cccccc 1px solid;"></p><pre class="brush:php;toolbar:false">btst.directive('btstPane', function () { return {
require: "^btstAccordion",
restrict: "E",
transclude: true,
replace: true,
scope: {
title: "@"
},
template: "<p>" +
" </p><p>" +
" <a>{{title}}</a>" +
" </p>" +
"<p>" +
" </p><p></p>" +
" " +
"",
link: function (scope, element, attrs) {
scope.$watch("title", function () { // NOTE: this requires jQuery (jQLite won't do html)
var hdr = element.find(".accordion-toggle");
hdr.html(scope.title);
});
}
};
});require 属性値は "btstPane" であるため、このディレクティブはディレクティブ " で使用する必要があります。 btstアコーディオン」真ん中。 transclude 属性は true で、タブに HTML タグが含まれていることを示します。スコープ内の「title」属性はインスタンスによって置き換えられます。
この例のテンプレートはより複雑です。 ng-transclude ディレクティブを介してテキスト コンテンツを受け取るように要素をマークしていることに注意してください。
テンプレートの「{{title}}」属性にはタグ名が表示されます。現時点ではプレーンテキスト表示のみを実装しており、そのスタイルは定義していません。リンク メソッドを使用してタイトルを HTML ソース コードに置き換え、よりリッチなスタイルを実現します。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトAngularJS 開発マニュアル にアクセスして学習してください)
このようにして、実用的な価値のある最初の命令が完了しました。その機能は複雑ではありませんが、入れ子になったディレクティブの定義方法、一意の要素 ID の生成方法、jQuery を使用して DOM を操作する方法、$watch メソッドの使用方法など、AngularJS の重要な知識ポイントと技術的な詳細を説明するのに十分です。スコープ変数の変更を監視します。
Google マップ コマンド
次の例は、Google マップを作成するコマンドです:
Google マップ コマンド
コマンドを作成する前に、ページに Google API 参照を追加する必要があります:
<!-- required to use Google maps --> <script> </script>
続行 次に、命令を作成します:
var app = angular.module("app", []);
app.directive("appMap", function () { return {
restrict: "E",
replace: true,
template: "<p></p>",
scope: {
center: "=", // Center point on the map
markers: "=", // Array of map markers
width: "@", // Map width in pixels.
height: "@", // Map height in pixels.
zoom: "@", // Zoom level (from 1 to 25).
mapTypeId: "@" // roadmap, satellite, hybrid, or terrain
},center 属性は双方向バインドです。このアプリケーションは、マップの中心を変更し、マップを操作できます (ユーザーがマウス ボタンでマップの位置を選択した場合)。同時に、ユーザーがスクロールして地図の場所を選択すると、地図は現在表示されている場所を更新するようにアプリケーションに通知します。
markers プロパティは配列形式であり、文字列にシリアル化するのに時間がかかるため、参照として定義されます。リンク メソッドは次の関数を実装できます:
1. マップを初期化します
2. ユーザー ビュー変数が変更されたときにマップを更新します
以下は実装コードです:
link: function (scope, element, attrs) { var toResize, toCenter; var map; var currentMarkers; // listen to changes in scope variables and update the control
var arr = ["width", "height", "markers", "mapTypeId"]; for (var i = 0, cnt = arr.length; i <p class="cnblogs_code" style="background-color:#f5f5f5;border:#cccccc 1px solid;"> </p><p>监测方法正如我们在文章开始时描述的，变量发生变化后，它将调用updateControl 方法。updateControl 方法实际上使用selected 选项创建了新的地图。</p><p>"zoom" 和 "center" 变量将被分别处理，因为我们不希望每次在用户选择或缩放地图时都重新创建地图。这两个方法检测地图是否重新创建还是仅仅是简单的更新。</p><p>以下是updateControl 方法的实现方法：</p><p class="cnblogs_code" style="background-color:#f5f5f5;border:#cccccc 1px solid;"></p><pre class="brush:php;toolbar:false">// update the controlfunction updateControl() { // get map options
var options = {
center: new google.maps.LatLng(40, -73),
zoom: 6,
mapTypeId: "roadmap"
}; if (scope.center) options.center = getLocation(scope.center); if (scope.zoom) options.zoom = scope.zoom * 1; if (scope.mapTypeId) options.mapTypeId = scope.mapTypeId; // create the map and update the markers
map = new google.maps.Map(element[0], options);
updateMarkers(); // listen to changes in the center property and update the scope
google.maps.event.addListener(map, 'center_changed', function () { if (toCenter) clearTimeout(toCenter);
toCenter = setTimeout(function () { if (scope.center) { if (map.center.lat() != scope.center.lat ||
map.center.lng() != scope.center.lon) {
scope.center = { lat: map.center.lat(), lon: map.center.lng() }; if (!scope.$$phase) scope.$apply("center");
}
}
}, 500);
}updateControl 方法首先需要接收Scope设置相关参数，接着使用options 创建和初始化地图。这是创建JavaScript指令的常见模式。
创建地图之后，方法会在更新标记的同时添加检测事件，以便监视地图中心位置的变化。该事件会监测当前的地图中心是否和Scope中的相同。如果不同，即会更新scope，调用$apply 方法通知AngularJS属性已经更改。这种绑定方式为双向绑定。
updateMarkers 方法十分的简单，几乎和AngularJS分离，所以我们在这里就不介绍了。
除了这个地图指令特有的功能，这个例子还展示了：
1. 两个过滤器转换坐标为常规数字到地理位置，例如33°38'24"N, 85°49'2"W。
2. 一个地理编码器，转换成地址的地理位置（也是基于谷歌的API）。
3. 使用HTML5的地理定位服务来获取用户当前位置的方法。
Wijmo Grid 指令
最后一个例子是可编辑的表格指令：
Wijmo Grid 指令
这里展示的图表插件是 Wijmo 前端插件套包中的一款插件 wijgrid 插件：
<wij-grid> <wij-grid-column> </wij-grid-column> <wij-grid-column> </wij-grid-column> <wij-grid-column> </wij-grid-column></wij-grid>
"wij-grid" 指令定制表格的属性，"wij-grid-column" 指令定制特性表格列的属性。以上标记定义了一个拥有三列的可编辑表格，分别为：“country”， "product" 和 "amount"。并且，以country列分组并且计算每个分组的合计。
这个指令中最特别的一点是 “wij-grid”和“wij-grid-column”的连接。为了使这个连接起作用，父指令中定义了如下controller：
app.directive("wijGrid", [ "$rootScope", "wijUtil", function ($rootScope, wijUtil) { return {
restrict: "E",
replace: true,
transclude: true,
template: "
关于controller 方法使用前文中提到的数组语法声明，在这个例子中，controller定义了addColumn 方法，它将会被"wij-grid-column" 指令调用。父指令会通过特定标记来访问列。
以下是"wij-grid-column" 指令的使用方法：
app.directive("wijGridColumn", function () { return {
require: "^wijGrid",
restrict: "E",
replace: true,
template: "<p></p>",
scope: {
binding: "@", // Property shown in this column.
header: "@", // Column header content.
format: "@", // Format used to display numeric values in this column.
width: "@", // Column width in pixels.
aggregate: "@", // Aggregate to display in group header rows.
group: "@", // Whether items should be grouped by the values in this column.
groupHeader: "@" // Text to display in the group header rows. },
link: function (scope, element, attrs, wijGrid) {
wijGrid.addColumn(scope);
}
}
});
require 成员用于指定"wij-grid-column" 指令的父级指令"wij-grid"。link 方法接收父指令的引用 (controller) ，同时通过addColumn 方法传递自身的scope 给父指令。scope 包含了表格用于创建列的所有信息。
更多指令
链接为一些AngularJS 指令的在线实例: http://wijmo.gcpowertools.com.cn/demo/AngularExplorer/ ，你可以在例子的基础上进行练习。例子都是严格的安照本文中的描述制作的，所以你可以无障碍学习他们。
本篇文章到这就结束了（想看更多就到PHP中文网AngularJS使用手册中学习），有问题的可以在下方留言提问。
以上がAngularJS ディレクティブの使用方法? Angularjs 命令の使用法の詳細 (コード例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。