日々精進

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

web

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を見たら以下のルールがあった。誰かがレイアウト調整のために追加した…

safariで画面の拡大縮小をさせない / 長押し時のメニューを表示させない

web

画面の拡大縮小をさせないためには以下のmetaタグを追加する。 <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> </head> 長押し時のメニューを表示させないためには以下をCSSに追加する。 body { -webkit-touch-callout: none; // 長押し時のメニューを表示させない -webkit-user-select: none; // 長押しで文字…

iOS Safariでキャッシュを削除する

web

設定アプリを開き、Safari > Advanced > Website Data > Clear...ボタンをタップ で消える。 Safariから消せるようにしてほしいなぁ。 参考: How to Clear Safari History And Website Data in iOS 9 or iOS 8 for iPhone and iPad1e3)g=1e3;else if(200>~~…

w3c validatorでxhtmlをvalidateすると「DOCTYPE Override in effect!」警告が出る

web

でxhtmlのチェックをしたところ以下の警告が出た。 The detected DOCTYPE Declaration "" has been suppressed and the DOCTYPE for "XHTML 1.0 Transitional" inserted instead, but even if no errors are shown b…

seleniumから$("ul:eq(1) select")のようにjQueryセレクタで要素を取得しようとすると「SyntaxError: DOM Exception 12」

web

「SyntaxError: DOM Exception 12」はChromeが標準で持っている$関数が吐くエラーメッセージっぽい。 恐らく、jQueryを読み込んでいると思っていたが読み込めてなくてChrome標準の$を使っていたために、jQuery独自のセレクタ文法がエラーになったと思われる…

bootstrapでaタグをDisableにする方法

web

css class の disabledを付ければ良い。 以下のような感じ。 <a href="..." class="disabled">... これだとクリックイベント発生しそうだが、しない。理由はdisabledクラスはpointer-events: none;を設定しており、これを設定するとクリックイベントが発生しなくなるため。 これはCSS3の機能</a>…

divの高さが0pxになる

web

ブラウザの仕様で、float:left、または float:rightが設定された子要素の高さは無視されることが原因。 対応方法として1.clearfixを使う方法、2.overflow属性を使う方法が以下のブログで紹介されている。 http://ogatism.jp/techs/float_height/ 参考: …

spanタグの中身を中央寄せにする

web

以下のCSSを設定すれば良い。普通にtext-align: centerさせてくれないものか。。 { display: inline-block; width: 100%; text-align: center; } 参考: http://www.dafuku.com/2014/03/span-css-align-center.html

requirejsでjsをビルドする際にminifyさせない

web

requirejsのoptionでoptimize: "none"を指定すればよい。 参考: