web
これはちょっとトリッキーなので最初ハマりそう。 まずdirectiveの呼び出し側は以下のように書く。 <directive ng-repeat = "item in stuff" callback = "callback(data1, data2)"/> directiveの定義では以下のようにしてcallback関数を受け取る。 scope { callback: '&' } callbackを呼ぶ時は以下のように一つのオブジェクトに引数を入れ</directive>…
bootstrapではlabelタグを使ってボタンをレイアウトすることがある。 下記サイトのButtonの実装例はlabelタグを使っている。 angular-ui.github.io labelタグを使った場合、ナゼかonblur, ng-blurイベントが実行されなくて困った。 以下サイトによるとlabel…
理由は、ng-disabled="true"にしてもクリックできてしまうから。 見た目はDisabledになっているのでぱっと見正しく動いてそうなのも困る。。 ng-disabledはbuttonタグであれば正しく動く。 参考:
このメソッド名がどうも覚えられない。removeかdeleteの方がいいなあ。array.splice(start, length); 参考:
lodashの_.cloneDeepではプロパティはコピーされるけどprototypeオブジェクトはコピー元と同じものをセットしてくれないので、instanceofの結果がコピー元と違うしメソッドも呼べない。 やりたい場合は自分で手書きするしかなさそう。コピーした後で copy.__…
Modalにデータを渡すにはresolveオプションを使う。これで他のServiceなどと同じようにConstructorにInjectionされる。 Modalから親画面にデータを渡すには、Modal側はclose(this.data)のようにcloseまたはdismissの引数として渡す。 親画面側はopenの戻り値…
以下のようにbackdrop : 'static'オプションを渡せばいい。 $modal.open({ ... backdrop : 'static' }); 参考:
ごく基本的な問題ですが。。 for (var i in array) としてはいけない。これだとiに入るのは配列のIndexを文字列にしたものになる。つまり、"0", "1"...がiに入る。 マジで。。JSのArrayはほんとどうかしてる。内部的には普通のオブジェクトと同じなんだな。 …
Flattenは以下のようにする Array.prototype.concat.apply([], twoDimensionalArray); なるほどー。applyにもっと詳しくなりたい。。 結合はconcatを使う。 array1.concat(array2) 参考:
以下のようにクラス名と同名のnamespaceを定義する。 declare module a { class b { } module b { class c { } } } そうすると、呼び出し側からは以下のようにInner Classっぽく呼び出せる var myB = new a.b(); var myC = new a.b.c(); バッドノウハウだけ…
詳細は下記記事参照。ファイルを開くCtrl+oはIntelliJのCamelHumpsっぽく部分一致でなくファイル名の一部を複数繋げて書いても一致してくれるので便利。 例えば、LoginController.tsだと「locon」と入力しても一致する。「loller」みたいに単語の先頭からで…
具体的には以下の現象が起きた。 Editorエリアのはじっこ(ガター)のところに更新した行かどうかが表示されなくなる。正確には変更してすぐは表示されるけど、Diskに保存されたら表示されなくなる Version Control windowに変更したファイルの一覧は出るが…
position: absoluteを指定している場合はmarginの指定にmargin-を除いたtop, bottom, left, rightを使わないといけない。 なので以下のようになる。 position: absolute; bottom: 10px; right: 5px; これなんでだろ。。margin-top, margin-leftは効くのにな…
親コントローラ側は以下のようにmodalInstance.resultからPromiseを取得できるのでCallbackを実行して値をもらう。 modalInstance.result.then((result) => {...}); モーダル側は$modalInstance.close();を呼ぶとsuccess callbackば呼ばれ、 $modalInstance.…
Bootstrapがvertical-align:topを設定しているのでそれを打ち消す設定をする。 以下の例ではクラスをつなげているがこれは詳細度を上げてBootstrapのスタイルを打ち消せるようにするため。 .td_vertical_align_middle.td_vertical_align_middle { vertical-a…
word-breakプロパティを使うが、word-break: normalだと長い英単語が途中で折り返されない。 word-break: break-allなら単語の途中でも折り返す。 参考:
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> 参考:
ポップアップウィンドウの外側の領域のように半透明のマスクをかけたい場合は マスクをかけたい要素の子どものdivを以下のように設定すればいい。 mask用divはposition: absoluteにして親要素全体を覆うようにする。 親はposition: relativeにしないといけな…
chrome dev toolでHTML Elementのスタイルを確認していると、CSSルールの中に「user agent stylesheet」で 設定されたものがある。これはブラウザが勝手に追加するCSSらしい。 ブラウザがCSS付けるとは知らなかった。。これのためにブラウザ毎に見た目が違っ…
突然二週間ほどAngularJSのプロジェクトを手伝うことになったのでAngularJS勉強中。 Angularでは ng-click="controller.handler('arg')" のような形でイベントハンドラに値を渡せる。 これを ng-click="controller.handler(consts.ARG)" のような感じで定数…
Bootstrap標準のスタイルを上書きしたい、でもクラス単体だと標準スタイルの方が詳細度が高いので上書きできない。。というような場合。 id.classのように他のidやクラスも指定して詳細度を上げるとそのidなどが変更された時に困るので、もっといい方法を探…
具体的にはnavbar-brandクラスを付けた項目とcollapse navbar-collapseクラスを付けた項目が重なる。 原因はBootstrapのクラスのスタイルを上書きするルールが定義されていたから。 CSSを見たら以下のルールがあった。誰かがレイアウト調整のために追加した…
画面の拡大縮小をさせないためには以下の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; // 長押しで文字…
設定アプリを開き、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>~~…
で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…
「SyntaxError: DOM Exception 12」はChromeが標準で持っている$関数が吐くエラーメッセージっぽい。 恐らく、jQueryを読み込んでいると思っていたが読み込めてなくてChrome標準の$を使っていたために、jQuery独自のセレクタ文法がエラーになったと思われる…
css class の disabledを付ければ良い。 以下のような感じ。 <a href="..." class="disabled">... これだとクリックイベント発生しそうだが、しない。理由はdisabledクラスはpointer-events: none;を設定しており、これを設定するとクリックイベントが発生しなくなるため。 これはCSS3の機能</a>…
ブラウザの仕様で、float:left、または float:rightが設定された子要素の高さは無視されることが原因。 対応方法として1.clearfixを使う方法、2.overflow属性を使う方法が以下のブログで紹介されている。 http://ogatism.jp/techs/float_height/ 参考: …
以下のCSSを設定すれば良い。普通にtext-align: centerさせてくれないものか。。 { display: inline-block; width: 100%; text-align: center; } 参考: http://www.dafuku.com/2014/03/span-css-align-center.html
requirejsのoptionでoptimize: "none"を指定すればよい。 参考: