Browse: Home » AngularJS

AngularJS

【AngularJS】ng-ifとng-show、ng-hideの違い。

要素の操作をしていて気づいたのでメモ。

■ng-if
要素そのものが削除されたり、生成されたりする。

■ng-show、ng-hide
要素は出力されているままで、スタイルのみで表示、非表示が切り替えられる。

要素そのものに動作を割り当てたい時（draggableなど）とかは使い分けが必要。

 

2014/07/29 _onichannn , ,

【AngularJS】文字列を全くエスケープさせずに表示する。

Angular1.2まではng-bind-html-unsafeがあったけど1.3からは削除されているので、$sceを用いて出力を行う。

// $sceサービスが注入されているのは前提
var text = '<hr>';
$scope.text = $sce.trustAsHtml(text);

これでOK。

 

2014/07/29 _onichannn , ,

【AngularJS】文字列中のURLをリンクに置換するフィルターを作った。

stackさんの回答とかを参考に自分が使いやすく。

coreApp.filter('parseUrl', function($sce) {
    var urlPattern = /(http|ftp|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:\/~+#-]*[\w@?^=%&amp;\/~+#-])?/gi;
    return function(text, target, style) {
        style = style || null;
        angular.forEach(text.match(urlPattern), function(url) {
            if (style) {
                text = text.replace(url, '<a target="' + target + '" href='+ url + ' style="' + style + '">' + url + '</a>');
            } else {
                text = text.replace(url, '<a target="' + target + '" href='+ url + '>' + url + '</a>');
            }
        });
        return $sce.trustAsHtml(text);
    };
});

使い方は引数を見てもらえれば一目瞭然だよね。

 

2014/07/29 _onichannn , ,

【AngularJS】ngClickはngDisabledを効かせたaタグの場合動作する。

ので注意が必要。

<a ng-click="hoge()" ng-disabled="true">ほげ</a>

これ、反応しちゃうよん。
おとなしくbuttonタグで実装するのが吉。

 

2014/07/29 _onichannn , ,

【AngularJS】ngStyleでstyle要素を動的に変更する。

スタイル要素を条件で分岐させたい時にとても有効。
使い方はngClassと同様、expressionかオブジェクトを渡せばOK。

// Editモードかそうでないかで要素の高さを分岐させたいと想定するとこうなる。
<div ng-style="{height: isEdit ? '300px' : '600px'}">ほげほげ</div>

ngStyleやngClass内のオブジェクトには三項演算子を渡せるので非常に便利。

 

2014/07/29 _onichannn , ,

【AngularJS】$watchでオブジェクト内の1階層分だけを監視したい時。

$watchCollectionを用いる。

$watchCollectionは$watchと引数が多少ことなり、第1引数はオブジェクトか文字列を受け取る。

// scope内の変数であれば文字列で指定可能
$scope.$watchCollection('user', function() {
    // 処理
});

// オブジェクトを渡せばそれを監視してくれる
$scope.$watchCollection(obj, function() {
    // 処理
});

階層が深い巨大なオブジェクトを監視させたい場合にとても有効。

 

2014/07/29 _onichannn , ,

【AngularJS】$watchで$scope内の特定のプロパティを指定したい時。

ドットで連結記法で記述したプロパティを文字列として第1引数に渡せばOK。

$scope.$watch('user.item', function() {
	// 処理
});

と言った感じ。

 

2014/07/29 _onichannn , ,

【AngularJS/PHP】$httpや$resourceでポストしたデータをPHPで受け取る。

これまじで若干つまった。

angularからポストしたデータをPHPで受け取ろうとして$_POSTを参照したところなにも入ってきていないので
どこにあるのか探しまくったところ、$GLOBALS[‘HTTP_RAW_POST_DATA’]に入ってきていることが判明。

こりゃ見つからんわ。

ちなみにローポストデータの受け取り方は下記の方法が存在しているとのこと。

// 定義済み変数を参照する
$HTTP_RAW_POST_DATA 

// 上記で抜き取れない場合は下記
$postdata = file_get_contents('php://input');

// それか$GLOBALSの中身を覗きに行く
$GLOBALS['HTTP_RAW_POST_DATA']

 

2014/07/24 _onichannn , , ,