AngularJS ディレクティブ

投稿日 2015/07/20

[Home]  | [Index]  | [ディレクティブ] [関数の使用]  | [サービス]  | [フィルタ] 

概要

ディレクティブは拡張された HTML の属性として使用される。AngularJS のディレクティブは ng- で始まる文字列である。

よく使うディレクティブ


ディレクティブの使用例

フォーム (テキストボックス)

このフォームはテキストボックスに入力した文字列をコントローラが取得してサーバへ送る。サーバはその文字列をそのまま送り返す。

form (textbox)

div(ng-controller="controller1")
 form(novalidate, name="form1", class="form-inline")
 label(for="form1_text1") form1_text1  
 input(type="text", ng-model="form1_text1", class="form-control")
 button(type="submit", ng-click="form1_submit(form1_text1)", class="btn btn-primary") OK
p(style="margin-left:3%;color:blue;margin-top:20px;") {{form1_result}}

controller

/* form1 */
$scope.form1_submit = function(x) {
   $http.get("/test/angular/form1?x=" + $scope.form1_text1)
     .success(
       function(response) {
          $scope.form1_result = response;
       });
};

server (node.js + express)

router.get('/angular/form1', function(req, res) {
  res.json('form1 ' + req.query.x);
});

フォーム (チェックボックスとラジオボタン)

このフォームは、チェックボックスとラジオボタンを初期化して、ボタンがクリックされたときそのときの状態をサーバへ送る。サーバ側では送られてきた状態をそのまま返す。

form (checkbox, radio)

div(ng-controller="controller1")
 form(novalidate, name="form2", ng-init="form2_check=true;form2_radio=1;init1=true;init2=false;init3=true;")
  input(type="checkbox", id="form2_check1", ng-model="form2_check", ng-checked="init3")
  label(for="form2_check1")  check1
  div(class="panel panel-default")
   input(type="radio", id="form2_radio1", ng-model="form2_radio", name="radio_group1", ng-value="1", ng-checked="init1")
   label(for="form2_radio1")  radio1
   input(type="radio", id="form2_radio2", ng-model="form2_radio", name="radio_group1", ng-value="2", ng-checked="init2")
   label(for="form2_radio2")  radio2
  button(type="submit", ng-click="form2_submit(form2_check, form2_radio);", class="btn btn-primary") OK
 p(style="margin-left:4%;margin-top:20px;color:blue;", ng-bind="form2_result")

controller

/* form2 */
$scope.form2_submit = function(check, radio) {
   var data = {check:check, radio:radio};
   $http.post("/test/angular/form2", data)
     .success(
       function(response) {
          $scope.form2_result = response;
       });
};

server (node.js + express)

/* form2 */
router.post('/angular/form2', function(req, res) {
  var s = req.body.check + ", " + req.body.radio;
  res.json("form2 = [ " + s + " ]");
});

フォーム (ドロップダウン)

このフォームは、ドロップダウンを初期化して、ボタンがクリックされたときそのときの状態をサーバへ送る。サーバ側では送られてきた状態をそのまま返す。

form (select)

div(ng-controller="controller1")
 form(novalidate, name="form3")
  select(ng-model="form3_select", class="form-control")
   option(ng-value="0", ng-selected="true") ---------- すし ------------
   option(ng-value="1") おおとろ
   option(ng-value="2") いくら
   option(ng-value="3") うに
   option(ng-value="4") ぼたんえび
   option(ng-value="5") はまち
  button(type="submit", class="btn btn-primary", ng-click="form3_submit(form3_select)") OK
 p(style="margin-left:4%;margin-top:20px;color:blue;", ng-bind="form3_result")

controller

/* form3 */
$scope.form3_submit = function(opt) {
  var data = {option:opt};
   $http.post("/test/angular/form3", data)
     .success(
       function(response) {
          $scope.form3_result = response;
       });
};

server (node.js + express)

/* form3 */
router.post('/angular/form3', function(req, res) {
  var s = req.body.option;
  res.json("form3 = [ " + s + " ]");
});

フォーム (フォームの評価)

このフォームは、テキストボックスに入力された文字列が1~10文字までのとき、コントローラへ送る。コントローラは小文字を大文字にしてそのまま返す。

form (validator)

div(ng-controller="controller1")
 form(novalidate, name="form4")
  .form-group
   label(for="form4_text1") form4_text1 
   input(type="text", name="form4_text1", class="form-control", ng-model="form4_text1", ng-required="true", ng-maxlength="10")
   p(ng-show="form4.form4_text1.$error.required") 入力必須。
   p(ng-show="form4.form4_text1.$error.maxlength") 10 文字までです。
  .form-group
   button(type="button", class="btn btn-primary", ng-click="form4_test(form4_text1);") OK
 p(ng-bind="form4_result", style="margin-left:4%;margin-top:20px;color:blue;")

controller

/* form4 */
$scope.form4_test = function(t1) {
  $scope.form4_result = angular.uppercase(t1);
};

ng-repeat の使用例 (1)

この例は、ng-init を使って ng-repeat で表示するためのモデル(配列)を初期化し、それを ng-repeat で表示する。

view

div(ng-init="arr=[101, 102, 103, 104]")
ul
 li(ng-repeat="x in arr") {{x}}

ng-repeat の使用例 (2)

この例は、ボタンをクリックするとサーバからデータを取得し、それを ng-repeat を使って一覧表示する。

view

div(ng-controller="controller1")
 form
  button(class="btn btn-primary", ng-click="get_ngrepeat()", style="margin-bottom:20px;") GET
  ul
   li(ng-repeat="x in ngrepeat_data") {{x}}

controller

/* ngRepeat */
$scope.get_ngrepeat = function() {
  $http.get("/test/angular/ngrepeat")
    .success(
      function(response) {
        $scope.ngrepeat_data = response;
      }
    );
};

server (node.js + express)

/* ngRepeat */
router.get('/angular/ngrepeat', function(req, res) {
  res.json(['JavaScript', 'TypeScript', 'CoffeeScript']);
});

ng-if の使用例

ng-if はそのモデルが true のときのみ、要素を表示する。

view

div
 label(id="ngIf1") 表示 / 非表示 
 input(id="ngIf1", type="checkbox", ng-model="ngif_val")
 img(src="/images/folder.gif", ng-if="ngif_val", style="margin-left:40px;")

ng-bind-html の使用例

ng-bind-html は HTML をエスケープせず(つまり機能を保ったまま)表示するとき使用する。そのためには、$sce.trustAs() メソッドを使用して、その HTML が安全であることを保障する必要がある。

view

div(ng-controller="controller1")
 div(ng-bind-html="ahtml")

controller

var msg = "<p style='color:red;text-align:center;padding:30px;'>HTML をエスケープせず使用するには、$sce.trustAs が必要</p>";
$scope.ahtml = $sce.trustAs($sce.HTML, msg);

 

 


 

ページの先頭へ