web
webpackでビルドしたjsファイルはデバッグし辛くて困っていた。 source mapを生成すればconcat前のjsファイル単位でDevToolから開けるし、Breakpointも置ける。神か。 source mapを生成する方法は、webpack.config.jsに以下を追加するだけ。 module.exports …
要件は以下。 ・ボタンをタップするとカメラが起動する ・カメラで写真を撮るとWeb画面に戻る ・Uploadボタンをタップすると写真をアップロードする 以下のタグを使うとカメラを起動し、写真を撮ることができる(Mobile Safari、Chromeで確認) <input type="file" accept="image/*" capture> 参考: HTML…
promises/A+の仕様の中に、「thenの中でPromiseオブジェクトをreturnすると、そのPromiseオブジェクトのthenを実行し、その後元のpromiseの流れに戻る」という仕様があるので、 thenの中で以下のようにリクエストを送信してpromiseを返してやれば良い。 this…
以下のようにするとsleepを実装出来る。 var deferred = Q.defer(); setTimeout(deferred.resolve, 10000); deferred.promise.then(function() { // 10秒後に実行される}); 参考:
以下のようにすればいい。 angular.module('MyApp', []) .controller('MyCtrl', [function() { angular.element(document).ready(function () { document.getElementById('msg').innerHTML = 'Hello'; }); }]); 参考:
原因は社内ProxyがGithubのSSL証明書を自己証明書にすり替えて送ってくることだった。 情シスがGithubとの通信内容をチェックするためにやってるんだろうなコレ。man in the middle攻撃じゃん。。 解決策は、.tsdrcファイルを作り、以下内容にしてプロジェク…
解決が結構面倒だった。 まずng-repeatでスクロール領域内を更新していたので、更新完了イベントが必要だった。 以下のdirectiveを定義してng-repeat完了イベントを定義した。 module sample { 'use strict'; /** * ng-repeat処理完了イベントを発行するDire…
□がDIVで|が親DIVのEdgeとすると、以下のようにしたい。 |□□□□| 親DIVの幅は固定で、中のDIVの数が増えたら横スクロール出来ようにしたい。 が、中のDIVをfloatを使って横並びにしていたので中のDIVを増やすと以下のように折り返してしまう。 |□□□□| |□ | こ…
アプリが依存するライブラリを読み込むのにRequireJSを使うことが多かったけど、 色々辛いのでindex.htmlにscriptタグを埋め込むソリューションを使ってみることにした。 今はmain-bower-filesを使ってビルド時にindex.htmlにscriptタグを埋めればいいらしい…
$document.readyメソッドにready時のイベントハンドラを渡せばいい。 参考:
どうもAngularJSが同じPathの場合routingをキャンセルしているっぽい。 まあ普通はそれでいいんだけど・・・今回はそのような場合に画面をリロードするという仕様があったので pathの最後に/を付けて無理矢理画面遷移させることにした。 あ、でも今気付いた…
以下のようにソートキーを配列でorderByに渡すとできる。 <div ng-repeat="division in divisions | orderBy:['group','sub']">{{division.group}}-{{division.sub}}</div> 参考: stackoverflow.com
ng-showはElementを残したままdisplay: noneで非表示にするのでキャッシュが効く。よって初期表示は遅いが再表示は速い。 ng-ifはその逆で、初期表示は速いが再表示は遅い。 参考: qiita.com
AngularJSは何も考えずに作ると結構重くなる。。 <select ng-options...>タグが100個ぐらいある画面をIEで開くと操作可能になるまで20秒ぐらいかかった。 ただ、画面仕様的になぜか入力することは無く常にselectタグはdisableになっている仕様だったので、 h5タグで書き直したら20</select>…
以下のように、リストに表示する名前に続けて | filter を書けばいい。 <select class="form-control" ng-model="selectedOption" ng-options="option.name | filter for option in category.options"></select> 参考: stackoverflow.com
rowクラスは左右に-15pxのマージンを持っており、rowの親Elementより大きい。 その理由は、列の左右にガター領域を確保するため。グリッドFWはすべてガターがあるらしい。 うーん、まだグリッドシステムとBootstrapをちゃんと理解できてないな。。 参考: st…
原因はrowクラスが左右に-15pxのマージンを持っており、自体は親Elementからはみ出しているため。 以下によると、新しいバージョンのBootでは解決しているようなので、Bootstrapのバージョンを上げたら直る。 stackoverflow.com それが難しいようなら以下を…
// フォーカスが当たっている要素を取得する var $focused = $(':focus'); // jQueryを使わない場合 var focused = document.activeElement; // フォーカス当たっているかどうかを判定する var hasFocus = $('foo').is(':focus'); // jQueryを使わない場合 e…
ちょっと勘違いしていたんだけど、successの定義は以下のようになっていてdataにhttp bodyが入る。 success(data: any, status: number, headers: ng.IHttpHeadersGetter, config: ng.IRequestConfig) thenの場合は以下のようにresponseが引数として渡される…
例えば、cursor: not-allowedが指定されているaタグがリストの下に重なっていると、 マウスカーソルが禁止カーソルになってしまい、「リストのこの項目はクリックできないのか!?」となってしまう。 selectタグのoptionのリストはOSが描画していてここにカ…
modalを開く時のオプションで以下を指定すると閉じなくなる。 var modalInstance = $modal.open({ ... backdrop: 'static', ... }); 参考:
scope経由でアクセスできる。 function Ctrl1($scope,$rootScope) { alert($scope.myForm.$dirty); } 参考:
普通にrequired="true"と書くと常にrequiredになってしまう。ng-required='!contact.email'のように書くと 動的に必須かどうかを変更出来る。 参考:
以下の型でよい。 link: function(scope: IMyDirectiveScope , elem: JQuery, attributes: ng.IAttributes, ngModel: ng.INgModelController) scopeの型だけangularのbuiltin型でない。scopeの型は自分で定義した方がいいのかなぁ。。めんどいからつい型をIS…
3つの関数がある。 encodeURI encodeURIComponent escape これらの違いはencodeしない文字が違うだけ。詳細は下記サイト参照。なるほどー。 参考: http://logic.moo.jp/data/archives/438.html
例えば、文字列として辞書順にソートするといかのようになる。 1 11 2 これを以下のようにしたい。 1 2 11 単に以下のようにstringをnumber型に変換するだけでよい。 ng-repeat="friend in friends | orderBy:Number(friend.id)" 参考:
実は@でbindingすればできる。 $scope: { position: '@' } これだと文字列としてしか渡せないと思っていたが、以下のように{{}}で囲むと{{}}の中を評価した値がdirectiveに渡される。 <my-directive position="{{right}}"></my-directive> じゃあ= bindingいらないじゃんという気もする。 参考:
custom directiveを使う。 実装方法は以下のサイト参照。Angularは以外とライフサイクルイベントが整備されてない気がする。。 参考: note.onichannn.net
以下の'{{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を使うとビルド時に配列アノテーションを挿入してくれる。 使い方は以下サイト参照。 参考: 一日一行: angularでng-annotateを利用してminify対策を自動化する