読者です 読者をやめる 読者になる 読者になる

ITの隊長のブログ

ITの隊長のブログです。いや、まだ隊長と呼べるほどには至っていないけど、日々がんばります。CakePHPとPlayFrameworkを使って仕事しています。最近はAngular2をさわりはじめたお(^ω^ = ^ω^)

【AngularJs1.4.x】input[type="range"]で、何故かレンジ入力の位置が変わらないバグ

AngularJS AngularJS1.4.x JavaScript

スポンサードリンク

丸1日ハマりました。

何故か知らないけど、directiveで作成するhtmlの中のinput[type="range"]。それに初期値を入れようとすると何故か更新されないバグがあることがわかりました。

github.com

issueを見るとわかると思いますが、みんな回避作を色々用意しています。しかし、私の環境では動かない。

どうしたものか。。。

試行錯誤しながら色々試すと、$timeoutを使ったコードが一番しっくりきて、しかも修正できた。

github.com

  • app.js
app.directive('myDirective', ['$timeout', '$interval', function($timeout, $interval) {
    function setScopeValues(scope, attrs) {
        scope.min = attrs.min || 0;
        scope.max = attrs.max || 0;
        scope.value = attrs.value || 0;
    }

    return {
        restrict: 'A',
        require: '?ngModel',
        scope: {
            ngModel: '=',
            ngModelDisplay: '='
        },
        template:
        '<div class="col-sm-12">' +
        '   <input type="text" ng-model="ngModelDisplay">' +
        '</div>' +
        '<div class="col-sm-12">' +
        '       <input type="range" value="{{value}}" class="form-control" min="{{min}}" max="{{max}}" ng-model="ngModel">' +
        '</div>',
        transclude: true,
        link: function(scope, element, attrs, ngModel) {
            setScopeValues(scope, attrs);

            // 下記コードを追加したら修正できた
            $timeout(function() {
                if (scope.value === attrs.value) {
                    ngModel.$setViewValue(scope.value);
                }
            });
        }
    }
}]);

ちなみに、$timeoutが何を意味しているかはわからない(`・ω・’)

www.buildinsider.net

なるほど。描画の後に動作しているっぽいということね。(本当かな。。。)