AngularJS と wijsplitter

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

コントローラとモデルが別個のファイルにある複雑なサンプルについては、「AngularJS ディレクティブギャラリー」を Web サイトで参照してください。

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

<!DOCTYPE HTML> <HTML ng-app="MyApp"> <head> </head> <body ng-controller="MyController"> </body> </HTML>

任意のテキストエディタに貼り付けます。	コードのコピー
<!DOCTYPE HTML> <HTML ng-app="MyApp"> <head> </head> <body ng-controller="MyController"> </body> </HTML>

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

１つは AngularJS 自体です。
もう１つは、Wijmo の Angular JavaScript 統合ライブラリです。

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

参照	コードのコピー
<!-- jQuery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js" type="text/javascript"></script> <!--Theme--> <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" /> <!--Wijmo Widgets CSS--> <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20153.83.min.css" rel="stylesheet" type="text/css" /> <!-- Wijmo Scripts --> <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20153.83.min.js" type="text/javascript"></script> <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20153.83.min.js" type="text/javascript"></script> <!-- Angular --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script> <script src="http://cdn.wijmo.com/interop/angular.wijmo.3.20153.83.min.js"></script>

<head> タグ内の参照の下に、次のスクリプトを追加して、Wijmo を使用するアプリケーションを設定します。また、$scope パラメータを使用して、データコンテキストを制御するための簡易コントローラを作成します。また、スプリッタがサイズ変更されたときにコンテンツを再表示するために、いくつかの関数を追加します。

スクリプト	コードのコピー
<script type="text/javascript"> var app = angular.module("MyApp", ["wijmo"]); function MyController($scope) { $scope.expanded = function (e) {$("#hsplitter").wijsplitter("refresh");}, $scope.collapsed = function (e) {$("#hsplitter").wijsplitter("refresh");}, $scope.sized = function (e) {$("#hsplitter").wijsplitter("refresh");} } </script>

スクリプト

コードのコピー

<script type="text/javascript">
    var app = angular.module("MyApp", ["wijmo"]);
    function MyController($scope) {
    
      $scope.expanded = function (e) {$("#hsplitter").wijsplitter("refresh");},
      $scope.collapsed = function (e) {$("#hsplitter").wijsplitter("refresh");},
      $scope.sized = function (e) {$("#hsplitter").wijsplitter("refresh");}
    
    }
</script>

次のマークアップを <body> タグ内に追加して、ウィジェットを作成します。Angular を使用せずに jQuery でこれをどのように行うかについては、スプリッタのクイックスタートを参照してください。

<wij-splitter> ディレクティブを使用してウィジェットを作成し、いくつかのオプションを要素内に属性として設定します。
- fullSplit オプション（full-split ディレクティブ）を false に設定して、ページいっぱいに表示しないようにします。
- panel1 オプションの min-size ディレクティブを 50 に設定して、最初のパネルを 50 ピクセル幅未満にできなくします。
マークアップ内で要素をネストして、axis、chartLabelStyle、header、legend、および seriesList オプションを設定します。
- <div> 要素を追加して、左パネルに表示するコンテンツを設定します。
- <div> 要素をもう１つ追加して、右パネルに表示するコンテンツを設定します。
- 右パネルに別のスプリッタをネストし、orientation を horizontal に、full-split を true に設定します。

マークアップ	コードのコピー
<wij-splitter id="vsplitter" full-split="false"> <panel1 min-size="50"> </panel1> <div> Roo oodely shnizzle razzle wacko yap woogle. Blippity Fling-Flang by <a href="http://bff.orangehairedboy.com/">orangehairedboy</a>. </div> <div> <wij-splitter id="hsplitter" orientation="horizontal" full-split="true"> <div> Blob FRAGGLE nizzleflung, zip wacko zoom doof duh shnuzzle-whack...crangle yap dee! </div> <div> <img src="images/wijmo_footer_tooltip.png"> Blop boo zong-shizzle. Hizzy duh blab yip flap flee doo bizzle? </div> </wij-splitter> </div> </wij-splitter>

マークアップ

コードのコピー

<wij-splitter id="vsplitter" full-split="false">
    <panel1 min-size="50">    </panel1>
    <div>
        Roo oodely shnizzle razzle wacko yap woogle. Blippity Fling-Flang by <a href="http://bff.orangehairedboy.com/">orangehairedboy</a>.
    </div>
    <div>
        <wij-splitter id="hsplitter" orientation="horizontal" full-split="true">
            <div>
                Blob FRAGGLE nizzleflung, zip wacko zoom doof duh shnuzzle-whack...crangle yap dee! </div>
            <div>
                <img src="images/wijmo_footer_tooltip.png">
    Blop boo zong-shizzle. Hizzy duh blab yip flap flee doo bizzle?
            </div>
        </wij-splitter>
    </div>

</wij-splitter>

<head> タグ内のウィジェットを初期化するスクリプトの上で、CSS を使用してスライダの幅を設定します。
スタイル
コードのコピー
<style type="text/css"> #vsplitter { height: 300px; width: 630px; } </style>
HTML ファイルを保存し、それをブラウザで開きます。実際のウィジェットは次のように表示されます。

関連トピック

参照