読者です 読者をやめる 読者になる 読者になる

日々精進

新しく学んだことを書き留めていきます

web

promiseのthenの中からリクエストを送信し、レスポンスを後続のthenに渡す

promises/A+の仕様の中に、「thenの中でPromiseオブジェクトをreturnすると、そのPromiseオブジェクトのthenを実行し、その後元のpromiseの流れに戻る」という仕様があるので、 thenの中で以下のようにリクエストを送信してpromiseを返してやれば良い。 this…

promiseを使ってsleepを実装する

以下のようにするとsleepを実装出来る。 var deferred = Q.defer(); setTimeout(deferred.resolve, 10000); deferred.promise.then(function() { // 10秒後に実行される}); 参考:

AngularJSでの$(document).readyの書き方

web

以下のようにすればいい。 angular.module('MyApp', []) .controller('MyCtrl', [function() { angular.element(document).ready(function () { document.getElementById('msg').innerHTML = 'Hello'; }); }]); 参考:

tsdを実行すると「Error: self signed certificate in certificate chain」エラー

web

原因は社内ProxyがGithubのSSL証明書を自己証明書にすり替えて送ってくることだった。 情シスがGithubとの通信内容をチェックするためにやってるんだろうなコレ。man in the middle攻撃じゃん。。 解決策は、.tsdrcファイルを作り、以下内容にしてプロジェク…

AngularJSでスクロール領域内を更新したらスクロール位置が変わってしまう問題

web

解決が結構面倒だった。 まずng-repeatでスクロール領域内を更新していたので、更新完了イベントが必要だった。 以下のdirectiveを定義してng-repeat完了イベントを定義した。 module sample { 'use strict'; /** * ng-repeat処理完了イベントを発行するDire…

スクロール領域内にfloatでdivを横に並べるとスクロールせず折り返してしまう問題

web

□がDIVで|が親DIVのEdgeとすると、以下のようにしたい。 |□□□□| 親DIVの幅は固定で、中のDIVの数が増えたら横スクロール出来ようにしたい。 が、中のDIVをfloatを使って横並びにしていたので中のDIVを増やすと以下のように折り返してしまう。 |□□□□| |□ | こ…

【依存関係解決】wiredepはdeprecatedなのでmain-bower-filesを使う

web

アプリが依存するライブラリを読み込むのにRequireJSを使うことが多かったけど、 色々辛いのでindex.htmlにscriptタグを埋め込むソリューションを使ってみることにした。 今はmain-bower-filesを使ってビルド時にindex.htmlにscriptタグを埋めればいいらしい…

Angularでdocument readyイベントを発生させる

web

$document.readyメソッドにready時のイベントハンドラを渡せばいい。 参考:

AngularJSの$location.path(url)で画面遷移する際に表示している画面のurlと同じurlを渡すと画面遷移しない

web

どうもAngularJSが同じPathの場合routingをキャンセルしているっぽい。 まあ普通はそれでいいんだけど・・・今回はそのような場合に画面をリロードするという仕様があったので pathの最後に/を付けて無理矢理画面遷移させることにした。 あ、でも今気付いた…

AngularJSで複数キーによるソートをorderByフィルタで行う

web

以下のようにソートキーを配列でorderByに渡すとできる。 <div ng-repeat="division in divisions | orderBy:['group','sub']">{{division.group}}-{{division.sub}}</div> 参考: stackoverflow.com

ng-showとng-ifのパフォーマンス観点での違い

web

ng-showはElementを残したままdisplay: noneで非表示にするのでキャッシュが効く。よって初期表示は遅いが再表示は速い。 ng-ifはその逆で、初期表示は速いが再表示は遅い。 参考: qiita.com

ng-optionsをやめてtext bindingだけにすると超速くなる

web

AngularJSは何も考えずに作ると結構重くなる。。 <select ng-options...>タグが100個ぐらいある画面をIEで開くと操作可能になるまで20秒ぐらいかかった。 ただ、画面仕様的になぜか入力することは無く常にselectタグはdisableになっている仕様だったので、 h5タグで書き直したら20</select>…

Angularのng-optionsでリストに表示される名前をfilterで加工する方法

web

以下のように、リストに表示する名前に続けて | filter を書けばいい。 <select class="form-control" ng-model="selectedOption" ng-options="option.name | filter for option in category.options"></select> 参考: stackoverflow.com

Bootstrapの<div class="row">が画面より大きい理由

web

rowクラスは左右に-15pxのマージンを持っており、rowの親Elementより大きい。 その理由は、列の左右にガター領域を確保するため。グリッドFWはすべてガターがあるらしい。 うーん、まだグリッドシステムとBootstrapをちゃんと理解できてないな。。 参考: st…

Bootstrapで<div class="row">をoverflow-y: auto;なdivの中に置くと横スクロールバーが出る

web

原因はrowクラスが左右に-15pxのマージンを持っており、自体は親Elementからはみ出しているため。 以下によると、新しいバージョンのBootでは解決しているようなので、Bootstrapのバージョンを上げたら直る。 stackoverflow.com それが難しいようなら以下を…

focusの当たっている要素を取得する方法

web

// フォーカスが当たっている要素を取得する var $focused = $(':focus'); // jQueryを使わない場合 var focused = document.activeElement; // フォーカス当たっているかどうかを判定する var hasFocus = $('foo').is(':focus'); // jQueryを使わない場合 e…

Angularの$http.get(...).successと$http.get(...).thenでは渡される引数が違う

web

ちょっと勘違いしていたんだけど、successの定義は以下のようになっていてdataにhttp bodyが入る。 success(data: any, status: number, headers: ng.IHttpHeadersGetter, config: ng.IRequestConfig) thenの場合は以下のようにresponseが引数として渡される…

selectタグをクリックして表示されるリストの下にカーソルが指定されているタグがあると、マウスカーソルが変わってしまう

web

例えば、cursor: not-allowedが指定されているaタグがリストの下に重なっていると、 マウスカーソルが禁止カーソルになってしまい、「リストのこの項目はクリックできないのか!?」となってしまう。 selectタグのoptionのリストはOSが描画していてここにカ…

Angular-UIのmodalダイアログのウィンドウの外側のグレーの部分をクリックしてもダイアログが閉じないようにする

web

modalを開く時のオプションで以下を指定すると閉じなくなる。 var modalInstance = $modal.open({ ... backdrop: 'static', ... }); 参考:

Angularでcontrollerからform.$dirtyにアクセスする

web

scope経由でアクセスできる。 function Ctrl1($scope,$rootScope) { alert($scope.myForm.$dirty); } 参考:

Angular 必須チェックをするかどうかを動的に設定する

web

普通にrequired="true"と書くと常にrequiredになってしまう。ng-required='!contact.email'のように書くと 動的に必須かどうかを変更出来る。 参考:

Angular directiveのlink関数の引数の型

web

以下の型でよい。 link: function(scope: IMyDirectiveScope , elem: JQuery, attributes: ng.IAttributes, ngModel: ng.INgModelController) scopeの型だけangularのbuiltin型でない。scopeの型は自分で定義した方がいいのかなぁ。。めんどいからつい型をIS…

JavascriptでURIエンコード

web

3つの関数がある。 encodeURI encodeURIComponent escape これらの違いはencodeしない文字が違うだけ。詳細は下記サイト参照。なるほどー。 参考: http://logic.moo.jp/data/archives/438.html

AngularのorderByフィルタで文字列を数値としてソートする

web

例えば、文字列として辞書順にソートするといかのようになる。 1 11 2 これを以下のようにしたい。 1 2 11 単に以下のようにstringをnumber型に変換するだけでよい。 ng-repeat="friend in friends | orderBy:Number(friend.id)" 参考:

Angular directiveに値を文字列でもAngular式でも渡せるようにする

web

実は@でbindingすればできる。 $scope: { position: '@' } これだと文字列としてしか渡せないと思っていたが、以下のように{{}}で囲むと{{}}の中を評価した値がdirectiveに渡される。 <my-directive position="{{right}}"></my-directive> じゃあ= bindingいらないじゃんという気もする。 参考:

ng-repeatが終了したタイミングで呼ばれるイベントを作る

web

custom directiveを使う。 実装方法は以下のサイト参照。Angularは以外とライフサイクルイベントが整備されてない気がする。。 参考: note.onichannn.net

ng-changeイベントで変更前の値を取る

web

以下の'{{user.id}}'のように、シングルクォートで囲むと変更前の値が取れる。 <select ng-change="updateValue(user, '{{user.id}}')" ng-model="user.id" ng-options="user.id as user.name for user in users"> </select> ng-change標準の機能で取れて欲しい。。 参考: angularjs - ng-change get new value and original value - Stack Overflow

ng-annotateでminifyされても不具合発生しないようにする

web

配列アノテーションを自分で書くのはだるいなと思っていたので丁度よかった。ng-annotateを使うとビルド時に配列アノテーションを挿入してくれる。 使い方は以下サイト参照。 参考: 一日一行: angularでng-annotateを利用してminify対策を自動化する

Angularのdirectiveから親画面にデータを渡す方法

web

これはちょっとトリッキーなので最初ハマりそう。 まずdirectiveの呼び出し側は以下のように書く。 <directive ng-repeat = "item in stuff" callback = "callback(data1, data2)"/> directiveの定義では以下のようにしてcallback関数を受け取る。 scope { callback: '&' } callbackを呼ぶ時は以下のように一つのオブジェクトに引数を入れ</directive>…

labelタグを使ってボタンを実装した場合onblur, ng-blurが効かない

web

bootstrapではlabelタグを使ってボタンをレイアウトすることがある。 下記サイトのButtonの実装例はlabelタグを使っている。 angular-ui.github.io labelタグを使った場合、ナゼかonblur, ng-blurイベントが実行されなくて困った。 以下サイトによるとlabel…

ng-disabled属性はaタグに使ってはいけない

web

理由は、ng-disabled="true"にしてもクリックできてしまうから。 見た目はDisabledになっているのでぱっと見正しく動いてそうなのも困る。。 ng-disabledはbuttonタグであれば正しく動く。 参考:

JavascriptでArrayの要素を削除する

web

このメソッド名がどうも覚えられない。removeかdeleteの方がいいなあ。array.splice(start, length); 参考:

Typescriptで型情報を保存したままオブジェクトをコピーする方法

web

lodashの_.cloneDeepではプロパティはコピーされるけどprototypeオブジェクトはコピー元と同じものをセットしてくれないので、instanceofの結果がコピー元と違うしメソッドも呼べない。 やりたい場合は自分で手書きするしかなさそう。コピーした後で copy.__…

AngularJSでModal Windowと親画面でデータをやりとりする方法

web

Modalにデータを渡すにはresolveオプションを使う。これで他のServiceなどと同じようにConstructorにInjectionされる。 Modalから親画面にデータを渡すには、Modal側はclose(this.data)のようにcloseまたはdismissの引数として渡す。 親画面側はopenの戻り値…

AngularJSでBootstrapのModal WindowがModal外の領域をクリックされた時に閉じられないようにする

web

以下のようにbackdrop : 'static'オプションを渡せばいい。 $modal.open({ ... backdrop : 'static' }); 参考:

JavascriptでArrayにfor...inを使ってはいけない

web

ごく基本的な問題ですが。。 for (var i in array) としてはいけない。これだとiに入るのは配列のIndexを文字列にしたものになる。つまり、"0", "1"...がiに入る。 マジで。。JSのArrayはほんとどうかしてる。内部的には普通のオブジェクトと同じなんだな。 …

JavascriptでFlattenとArrayの結合

web

Flattenは以下のようにする Array.prototype.concat.apply([], twoDimensionalArray); なるほどー。applyにもっと詳しくなりたい。。 結合はconcatを使う。 array1.concat(array2) 参考:

TypescriptでInner Classを定義する方法

web

以下のようにクラス名と同名のnamespaceを定義する。 declare module a { class b { } module b { class c { } } } そうすると、呼び出し側からは以下のようにInner Classっぽく呼び出せる var myB = new a.b(); var myC = new a.b.c(); バッドノウハウだけ…

Chrome dev toolsのショートカット

web

詳細は下記記事参照。ファイルを開くCtrl+oはIntelliJのCamelHumpsっぽく部分一致でなくファイル名の一部を複数繋げて書いても一致してくれるので便利。 例えば、LoginController.tsだと「locon」と入力しても一致する。「loller」みたいに単語の先頭からで…

IntelliJでブランチの最新版との差分が出なくなる問題

具体的には以下の現象が起きた。 Editorエリアのはじっこ(ガター)のところに更新した行かどうかが表示されなくなる。正確には変更してすぐは表示されるけど、Diskに保存されたら表示されなくなる Version Control windowに変更したファイルの一覧は出るが…

CSSでposition: absoluteを指定している場合、margin-bottom, margin-rightが効かない

web

position: absoluteを指定している場合はmarginの指定にmargin-を除いたtop, bottom, left, rightを使わないといけない。 なので以下のようになる。 position: absolute; bottom: 10px; right: 5px; これなんでだろ。。margin-top, margin-leftは効くのにな…

Angular+Bootstrapでモーダルを表示した時に、モーダルから親画面に値を渡す

web

親コントローラ側は以下のようにmodalInstance.resultからPromiseを取得できるのでCallbackを実行して値をもらう。 modalInstance.result.then((result) => {...}); モーダル側は$modalInstance.close();を呼ぶとsuccess callbackば呼ばれ、 $modalInstance.…

Bootstrapのtableのcell内を上下中央寄せにする

web

Bootstrapがvertical-align:topを設定しているのでそれを打ち消す設定をする。 以下の例ではクラスをつなげているがこれは詳細度を上げてBootstrapのスタイルを打ち消せるようにするため。 .td_vertical_align_middle.td_vertical_align_middle { vertical-a…

CSSで文字列を折り返す

web

word-breakプロパティを使うが、word-break: normalだと長い英単語が途中で折り返されない。 word-break: break-allなら単語の途中でも折り返す。 参考:

webで丸いボタンを作る

web

border-radiusの値をwidth,heightの半分の値にすればいい。 例は以下。 .btn-circle { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.42; border-radius: 15px; } <a href="#" class="btn btn-default btn-circle"><i class="fa fa-user"></i></a> 参考:

半透明のマスクをかける

web

ポップアップウィンドウの外側の領域のように半透明のマスクをかけたい場合は マスクをかけたい要素の子どものdivを以下のように設定すればいい。 mask用divはposition: absoluteにして親要素全体を覆うようにする。 親はposition: relativeにしないといけな…

user agent stylesheetとは何者か

web

chrome dev toolでHTML Elementのスタイルを確認していると、CSSルールの中に「user agent stylesheet」で 設定されたものがある。これはブラウザが勝手に追加するCSSらしい。 ブラウザがCSS付けるとは知らなかった。。これのためにブラウザ毎に見た目が違っ…

AngularJSのイベントハンドラにViewから定数を渡す

web

突然二週間ほどAngularJSのプロジェクトを手伝うことになったのでAngularJS勉強中。 Angularでは ng-click="controller.handler('arg')" のような形でイベントハンドラに値を渡せる。 これを ng-click="controller.handler(consts.ARG)" のような感じで定数…

CSSのスタイルを上書きするためにセレクタの詳細度を上げる場合は.selector.selectorのようにするのがいい

web

Bootstrap標準のスタイルを上書きしたい、でもクラス単体だと標準スタイルの方が詳細度が高いので上書きできない。。というような場合。 id.classのように他のidやクラスも指定して詳細度を上げるとそのidなどが変更された時に困るので、もっといい方法を探…

Bootstrapのナビバーの項目が重なってしまう

web

具体的にはnavbar-brandクラスを付けた項目とcollapse navbar-collapseクラスを付けた項目が重なる。 原因はBootstrapのクラスのスタイルを上書きするルールが定義されていたから。 CSSを見たら以下のルールがあった。誰かがレイアウト調整のために追加した…