LoginSignup
0
2

More than 5 years have passed since last update.

icheckをどうしてもangularで使いたかった

Posted at

とある案件で、angularJS(1.x)でicheckを使おうと思ったところ、そのへんに落ちているサンプルをコピペしてもモバイルでうまく動かなくてハマった。

tripDirectives.directive('icheck', function($timeout, $parse) {
    return {
        require: 'ngModel',
        link: function($scope, element, $attrs, ngModel) {
            return $timeout(function() {
                var value;
                value = $attrs['value'];

                $scope.$watch($attrs['ngModel'], function(newValue){
                    $(element).iCheck('update');
                    event.preventDefault(); //この行がないとモバイルでうまく動かない
                    event.stopPropagation(); //この行がないとモバイルでうまく動かない
                })
                $(element).on('')
                return $(element).iCheck({
                    checkboxClass: 'icheckbox_flat',
                    radioClass: 'iradio_flat'
                }).on('ifChanged', function(event) {
                    if ($(element).attr('type') === 'checkbox' && $attrs['ngModel']) {
                        $scope.$apply(function() {
                            return ngModel.$setViewValue(event.target.checked);
                        });
                    }
                    if ($(element).attr('type') === 'radio' && $attrs['ngModel']) {
                        return $scope.$apply(function() {
                            return ngModel.$setViewValue(value);
                        });
                    }
                });
            });
        }
    };
});

どうやら2回発火してしまっていることが原因だったので、propergationを切ってあげたところ、うまくいった。

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2