More Related Content Similar to ng-mtg#6 AngularJS ディレクティブ・パターン (20) More from Hayashi Yuichi (9) ng-mtg#6 AngularJS ディレクティブ・パターン15. 15
The normalization process is as follows:
!
Strip x- and data- from the front of the element/attributes.
Convert the :, -, or _-delimited name to camelCase.
[引用] https://docs.angularjs.org/guide/directive
呼び出しパターン
19. <div dummy-text><p class=“bg-danger">NG</p></div>
<div dummy_text><p class=“bg-danger">NG</p></div>
<div dummy:text><p class=“bg-danger”>NG</p></div>
<div dummyText><p class=“bg-danger">NG</p></div>
<div data-dummy-text><p class=“bg-danger">NG</p></div>
<div data-dummy_text><p class=“bg-danger">NG</p></div>
<div data-dummy:text><p class=“bg-danger”>NG</p></div>
<div data-dummyText><p class=“bg-danger">NG</p></div>
<div x-dummy-text><p class=“bg-danger">NG</p></div>
<div x-dummy_text><p class=“bg-danger">NG</p></div>
<div x-dummy:text><p class=“bg-danger">NG</p></div>
<div x-dummyText><p class="bg-danger">NG</p></div>
19
いろんな属性で呼び出してみた
呼び出しパターン 01 Restrict: A
20. <div dummy-text><p class=“bg-danger">NG</p></div>
<div dummy_text><p class=“bg-danger">NG</p></div>
<div dummy:text><p class=“bg-danger”>NG</p></div>
<div dummyText><p class=“bg-danger">NG</p></div>
<div data-dummy-text><p class=“bg-danger">NG</p></div>
<div data-dummy_text><p class=“bg-danger">NG</p></div>
<div data-dummy:text><p class=“bg-danger”>NG</p></div>
<div data-dummyText><p class=“bg-danger">NG</p></div>
<div x-dummy-text><p class=“bg-danger">NG</p></div>
<div x-dummy_text><p class=“bg-danger">NG</p></div>
<div x-dummy:text><p class=“bg-danger">NG</p></div>
<div x-dummyText><p class="bg-danger">NG</p></div>
20
結果・・・
呼び出しパターン
camelCaseはダメでした
01 Restrict: A
22. <div class="dummy-text"><p class=“bg-danger">NG</p></div>
<div class="dummy_text"><p class=“bg-danger">NG</p></div>
<div class="dummy:text"><p class=“bg-danger">NG</p></div>
<div class="dummyText"><p class=“bg-danger">NG</p></div>
<div class="data-dummy-text"><p class=“bg-danger">NG</p></div>
<div class="data-dummy_text"><p class=“bg-danger">NG</p></div>
<div class=“data-dummy:text”><p class=“bg-danger">NG</p></div>
<div class="data-dummyText"><p class=“bg-danger">NG</p></div>
<div class="x-dummy-text"><p class=“bg-danger">NG</p></div>
<div class="x-dummy_text"><p class=“bg-danger">NG</p></div>
<div class=“x-dummy:text”><p class=“bg-danger">NG</p></div>
<div class="x-dummyText"><p class="bg-danger">NG</p></div>
22
いろんなクラスで呼び出してみた
呼び出しパターン 02 Restrict: C
23. 23
<div class="dummy-text"><p class=“bg-danger">NG</p></div>
<div class="dummy_text"><p class=“bg-danger">NG</p></div>
<div class="dummy:text"><p class=“bg-danger">NG</p></div>
<div class="dummyText"><p class=“bg-danger">NG</p></div>
<div class="data-dummy-text"><p class=“bg-danger">NG</p></div>
<div class="data-dummy_text"><p class=“bg-danger">NG</p></div>
<div class=“data-dummy:text”><p class=“bg-danger">NG</p></div>
<div class="data-dummyText"><p class=“bg-danger">NG</p></div>
<div class="x-dummy-text"><p class=“bg-danger">NG</p></div>
<div class="x-dummy_text"><p class=“bg-danger">NG</p></div>
<div class=“x-dummy:text”><p class=“bg-danger">NG</p></div>
<div class="x-dummyText"><p class="bg-danger">NG</p></div>
呼び出しパターン 02 Restrict: C
結果・・・
:はダメでした
25. <dummy-text><p class=“bg-danger">NG</p></dummy-text>
<dummy_text><p class=“bg-danger”>NG</p></dummy_text>
<dummy:text><p class=“bg-danger">NG</p></dummy:text>
<dummyText><p class=“bg-danger">NG</p></dummyText>
<data-dummy-text><p class=“bg-danger">NG</p></data-dummy-text>
<data-dummy_text><p class=“bg-danger">NG</p></data-dummy_text>
<data-dummy:text><p class=“bg-danger">NG</p></data-dummy:text>
<data-dummyText><p class=“bg-danger”>NG</p></data-:dummyText>
<x-dummy-text><p class=“bg-danger">NG</p></x-dummy-text>
<x-dummy_text><p class=“bg-danger">NG</p></x-dummy_text>
<x-dummy:text><p class=“bg-danger">NG</p></x-dummy:text>
<x-dummyText><p class=“bg-danger">NG</p></x-dummyText>
25
呼び出しパターン
いろんなタグで呼び出してみた
03 Restrict: E
26. <dummy-text><p class=“bg-danger">NG</p></dummy-text>
<dummy_text><p class=“bg-danger”>NG</p></dummy_text>
<dummy:text><p class=“bg-danger">NG</p></dummy:text>
<dummyText><p class=“bg-danger">NG</p></dummyText>
<data-dummy-text><p class=“bg-danger">NG</p></data-dummy-text>
<data-dummy_text><p class=“bg-danger">NG</p></data-dummy_text>
<data-dummy:text><p class=“bg-danger">NG</p></data-dummy:text>
<data-dummyText><p class=“bg-danger”>NG</p></data-:dummyText>
<x-dummy-text><p class=“bg-danger">NG</p></x-dummy-text>
<x-dummy_text><p class=“bg-danger">NG</p></x-dummy_text>
<x-dummy:text><p class=“bg-danger">NG</p></x-dummy:text>
<x-dummyText><p class=“bg-danger">NG</p></x-dummyText>
26
呼び出しパターン
結果・・・
camelCaseは
ダメでした
03 Restrict: E
28. <!-- directive: dummy-text —>
<!-- directive: dummy_text —>
<!-- directive: dummy:text —>
<!-- directive: dummyText —>
<!-- directive: data-dummy-text —>
<!-- directive: data-dummy_text —>
<!-- directive: data-dummy:text —>
<!-- directive: data-dummyText —>
<!-- directive: x-dummy-text —>
<!-- directive: x-dummy_text —>
<!-- directive: x-dummy:text —>
<!-- directive: x-dummyText -->
28
呼び出しパターン
いろんなコメントで呼び出してみた
04 Restrict: M
29. <!-- directive: dummy-text —>
<!-- directive: dummy_text —>
<!-- directive: dummy:text —>
<!-- directive: dummyText —>
<!-- directive: data-dummy-text —>
<!-- directive: data-dummy_text —>
<!-- directive: data-dummy:text —>
<!-- directive: data-dummyText —>
<!-- directive: x-dummy-text —>
<!-- directive: x-dummy_text —>
<!-- directive: x-dummy:text —>
<!-- directive: x-dummyText -->
29
呼び出しパターン
結果・・・
:はダメでした
04 Restrict: M
44. 44
templates/sidebar.html
<nav>
<ul class="nav nav-pills nav-stacked">
<li ng-class="{active:current==='/'}"><a href="#/">TOP</a></li>
<li ng-class="{active:current==='/restrict/a'}"><a href=“#/menu/a">MENU A</a></li>
<li ng-class="{active:current==='/restrict/c'}"><a href=“#/menu/b">MENU B</a></li>
</ul>
</nav>
<sidebar></sidebar>実例
実装パターン 01 テンプレートパターン
currentの値が一致していたら
activeクラスをつける
63. <form id=“message-form” ng-submit=“send();”>
<textarea shift-submit=“message-form”></textarea>
<p><input type=“submit” class=“btn btn-primary”></p>
</form>
<textarea shift-submit></textarea>
63
実例
実装パターン
SubmitしたいformタグのID
Submitされたときの処理
03 イベントフックパターン
64. 64
実例
angular.module(“directives").directive("shiftSubmit", function() {
return {
restrict:‘AC',
scope: {
shiftSubmit:‘@’
},
link : function($scope, $element){
function keydownHandler(e) {
var $form = angular.element('#' + $scope.shiftSubmit);
if (e.shiftKey && e.keyCode === 13) {
e.preventDefault();
$form.triggerHandler('submit');
}
}
$element.on("keydown", keydownHandler);
$scope.$on('$destroy', function() {
$element.off("keydown", keydownHandler);
directives/ShiftSubmit.js
実装パターン
<textarea shift-submit></textarea>
要素にkeydownイベントをつける
shiftSubmit属性の値をもとに
form要素を取得
ShiftキーとEnterキーが押されてたら
form要素をsubmit
03 イベントフックパターン
65. 65
実例
angular.module('controllers').controller('PatternCtrl', function ($scope) {
$scope.messages = [];
$scope.inputMessage = ‘';
$scope.send = function() {
var message = $scope.inputMessage;
if (!message) return;
$scope.messages.unshift({
date: new Date(),
message: message
});
$scope.inputMessage = '';
};
});
controllers/PatternCtrl.js
実装パターン
<textarea shift-submit></textarea>
inputMessageモデルから入力された
メッセージを取得
03 イベントフックパターン
70. 70
実例
angular.module('directives').directive('tooltip',function() {
return {
restrict: 'AC',
replace: true,
scope: {
tooltip:‘@’
},
link: function($scope,$element) {
$element.data('powertip',$scope.tooltip).powerTip();
$scope.$on('$destroy', function() {
$element.powerTip('destroy');
});
}
};
});
directives/tooltip.js
実装パターン
<div tooltip=“ツールチップ表示”></div>
powertipの使い方に合わせて
要素にツールチップの文言を設定
scopeが破棄されたときには
powertipも合わせて破棄
04 jQueryプラグインパターン
74. 74
/***********************************************
* ng-grid JavaScript Library
* Authors: https://github.com/angular-ui/ng-grid/blob/master/README.md
* License: MIT (http://www.opensource.org/licenses/mit-license.php)
* Compiled At: 04/29/2014 10:21
***********************************************/
(function(window, $) {
'use strict';
// the # of rows we want to add to the top and bottom of the rendered grid rows
var EXCESS_ROWS = 6;
var SCROLL_THRESHOLD = 4;
var ASC = "asc";
// constant for sorting direction
var DESC = "desc";
// constant for sorting direction
var NG_FIELD = '_ng_field_';
var NG_DEPTH = '_ng_depth_';
var NG_HIDDEN = '_ng_hidden_';
var NG_COLUMN = '_ng_column_';
var CUSTOM_FILTERS = /CUSTOM_FILTERS/g;
var COL_FIELD = /COL_FIELD/g;
var DISPLAY_CELL_TEMPLATE = /DISPLAY_CELL_TEMPLATE/g;
var EDITABLE_CELL_TEMPLATE = /EDITABLE_CELL_TEMPLATE/g;
var CELL_EDITABLE_CONDITION = /CELL_EDITABLE_CONDITION/g;
var TEMPLATE_REGEXP = /<.+>/;
window.ngGrid = {};
window.ngGrid.i18n = {};
【引用】https://github.com/angular-ui/ng-grid
75. 75
<div class="gridStyle" ng-grid="gridOptions"></div>
実装パターン
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [{name: "Moroni", age: 50},
{name: "Tiancum", age: 43},
{name: "Jacob", age: 27},
{name: "Nephi", age: 29},
{name: "Enos", age: 34}];
$scope.gridOptions = { data: 'myData' };
});
【引用】https://github.com/angular-ui/ng-grid
view
controller
並べ替えもできる