Wijmo UI for the Web
AngularJS と wijpopup
全て展開全て展開
すべて折りたたむすべて折りたたむ

この Angular 導入ガイドでは、HTML マークアップ、jQuery スクリプト、および AngularJS ディレクティブを使用して、wijpopup を HTML プロジェクト内で使用する方法について学習します。

コントローラーとモデルをそれぞれ個別のファイルで設定する、より複雑なサンプルについては、弊社 Web サイト「AngularJS Directive Gallery」を参照してください。

  1. 新しい HTML ページを作成するには、任意のテキストエディタで次のコードを追加し、.html 拡張子を付けてドキュメントを保存します。<HTML> タグと <body> タグが通常のタグとは異なることに注意してください。
    • <HTML> タグは、ng-app ディレクティブによって Angular アプリケーションとマークされ、さらに Wijmo を使用するように指定されます。
    • <body> タグを使用して、作成する Angular コントローラーのスコープを定義します。スコープには <div> などの別のタグも使用できますが、ここでは、body 全体を使用します。ng-controller ディレクティブは、このスコープ内で使用するコントローラーを指定します。

    ドロップダウンからマークアップをコピーします

  2. 依存ファイルへのリンクを HTML ページの <head> タグ内に追加します。最新の依存ファイルについては、「wijmo cdn」のコンテンツ配信ネットワーク(CDN)ファイルを参照してください。通常の参照に加え、Angular 用に 2 つのスクリプト参照を追加します。この参照は jQuery 参照の後に続ける必要があるので、最後の 2 行となります。
    • 1 つは AngularJS 自身です。
    • もう 1 つは、Wijmo の Angular javascript 統合ライブラリです。

    ドロップダウンして参照コードをコピーし、head タグ内に貼り付けます

  3. <head> タグ内の参照の後に、次のスクリプトを追加します。このスクリプトは、アプリケーションが Wijmo を使用するように設定し、$scope パラメータでデータコンテキストを制御する単純なコントローラーを作成します。さらに、ボタンの onclick イベントで呼び出す popupbelow 関数を追加します。
    スクリプト
    コードのコピー
    <script type="text/javascript">
        var app = angular.module("MyApp", ["wijmo"]);
        function MyController($scope) {
            $scope.popupbelow = function () {
                $("#unicorn").wijpopup('show', { 
                    of: $('#showbtn')
                });
            }
        }
    </script>
  4. <body> タグ内に次のマークアップを追加して、ウィジェットを作成します。Angular を使用せずに jQuery でこの処理を行う方法については、Popup の「クイックスタート」を参照してください。
    • <wij-popup> ディレクティブを使用してウィジェットを作成し、要素内でいくつかのオプションを属性として設定します。
      • コントローラー内の popupbelow 関数が検出できるように、id 属性を「#unicorn」に設定します。
      • showEffect オプション(show-effect ディレクティブ)を設定して、ポップアップを表示するときにブラインド効果を使用します。
      • ポップアップ外側の場所をクリックしたときに、ポップアップが非表示になるように、autoHide オプション(auto-hide ディレクティブ)を true に設定します。
    • また、マークアップ内で <input> 要素を使用して、ポップアップを開くボタンを作成します。スクリプトで作成した popupbelow 関数を使用するように、onclick イベントを設定します。
    マークアップ
    コードのコピー
    <!-- Image that displays with wijpopup -->
    <wij-popup id="unicorn" show-effect="blind" auto-hide="true"> 
        <img src="http://cdn.wijmo.com/images/unicorn.jpg" alt="Popup Unicorn!" /> 
    </wij-popup>
    <!-- Button to show the image and set its relative location -->
    <div> 
        <input type="button" id="showbtn" ng-click="popupbelow();" value="Show Popup" /> 
    </div>
  5. HTML ファイルを保存し、ブラウザで開きます。作成されたウィジェットは、実際には次のように表示されます。

関連トピック

参照

 

 


Copyright © GrapeCity inc. All rights reserved.