AngularJS

【AngularJS】ngRepeatが完了したタイミングでコールバックを呼びたい。

ので調べてみた。

安定のstackさん。ありがとうございます。

http://stackoverflow.com/questions/15207788/calling-a-function-when-ng-repeat-has-finished

まず、ngRepeatの終了を検知するディレクティブを定義。

var module = angular.module('testApp', [])
    .directive('onFinishRender', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit('ngRepeatFinished');
                });
            }
        }
    }
});

そしてngRepeatを用いていて、終了を検出したい要素に対して「on-finish-render」の属性を追加する。

最後にコントローラーから下記のようにイベントを実行させる。

$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
    // 実行したい処理を記述
});

これ相当便利ですぜ。

 

【AngularJS】datepickerをカスタマイズする。

Angularは標準でもカレンダーは出してくれるんだけどどうにもださいのでカスタマイズしてみる。

下記のdatepickerが追加ファイルも少なくてデザインもいい感じ。

https://github.com/g00fy-/angular-datepicker

 

【AngularJS】$httpの通信を横取りして挙動をカスタマイズする。

まずはconfig()メソッドで$httpProviderサービスにinterceptorを追加する。

angular.module('hogeApp', []).config(['$httpProvider', function($httpProvider) {
    $httpProvider.interceptors.push('errorHttpInterceptor');
}]);

次にpushしたerrorHttpInterceptorサービスを実装する。

angular.module('hogeApp', []).factory('errorHttpInterceptor', ['$q', '$location',
    function($q, $location) {
        return {
            // optional method
            request: function(config) {
                return config;
            },
        
            // optional method
            requestError: function(rejection) {
                return $q.reject(rejection);
            },
        
            // optional method
            response: function(response) {
                return response;
            },
        
            // optional method
            responseError: function(rejection) {
                if(rejection.status !== 200) {
                    // レスポンスコードに異常が見られたら処理をかますなどすきに実装する。
                    return $q.reject(rejection);
                }
                return $q.reject(rejection);
            }
        };
    }
]);

 

【AngularJS】routeProviderでルーティングとコントローラーを指定している場合。

はビュー側のディレクティブng-controllerでコントローラーを指定してやる必要はない。

という事に今更気づく。

コントローラーの処理が毎回2度ずつ走っているので気になって調べたら思っきし同じことしてる質問をみつけてしまった。

http://stackoverflow.com/questions/15535336/combating-angularjs-executing-controller-twice

たしかに考えてみればそうだよね。

 

【AngularJS】dateフィルターまとめ。

は下記を参照。

https://docs.angularjs.org/api/ng/filter/date

 

【AngularJS】ファイルアップロードを実装する。

下記のサンプルが非常にリッチですばらしい。

http://angular-file-upload.appspot.com/

githubはこちら。

https://github.com/danialfarid/angular-file-upload

 

【AngularJS】フィルタリング済みの件数を取得する。

検索機能などの実装時、フィルタリング後の件数を取得したい場合。

<span>{{(data|filter:query).length}}</span>

queryで絞った後の配列のlengthを参照してやればOK。

下記のような方法もエレガント。

<div ng-repeat="person in filtered = (data | filter: query)">
</div>

で、こうする。

Showing {{filtered.length}} Persons

リピートの母体にそもそもフィルタリング後のデータを注入してやるのは斬新。

 

【AngularJS】コントローラーからフィルターを使う方法。

まずはコントローラーに「$filter」サービスを注入する。

function myCtrl($scope, $filter)
{
}

次に使いたいフィルターを呼び出す

$filter('filtername');

引数を渡してやれば完成。

function myCtrl($scope, $filter)
{
    $filter('filtername')(arg1,arg2);
}

arg1にng-repeatでも用いるリストを渡せばOK。