AngularJSを使った際のstyle属性について些細なお話をば

この記事はだいぶ前に書かれたものなので情報が古いかもしれません

この記事を三行にまとめると

そこにしびれるあこがれるぅ！！
ng-style属性を使って書くようにした方が良いよ
それにしてもIE使ってらっしゃるなんて、ぷぷーっ

AngularJSを使って項目を表示させている場合に、AngularJSの変数を使ってHTMLタグの中に直接style属性を使ってCSSを書き込んでいると、効いてくれないことがある。

僕も全パターンを確認したわけではないですが、とりあえずこれから述べるようなパターンの場合において、IEで見たときに（やっぱりIEだ！）スタイルが効いていなかった。さすがIEさん。ChromeやSafariでは起きない現象を平然とやってのける。そこにしびれるあこがれるぅ！！

こういう場合はAngularJS用のstyle属性の書き方があるんで、それを使って解決するのが良いです。

ほんじゃあ、実際にやってみましょう。

通常の書き方

実際に僕がAngularJSを使ってて上で述べたような現象が起きたのは、プログレスバーを作ってたときでした。

サンプルページ用意したんで、見てもらった方が早いかな。

style属性を使ったプログレスバー

ソースをざっくり書くと、こんな感じです。

<div ng-controller="ctrlRead">
  <div class="progress">
    <div class="progress-bar" style="width:{{item.progress}}%">{{item.progress}}%</div>
  </div>
</div>

<script>
function ctrlRead($scope) {
  $scope.items = [
    {"progress":0},
    {"progress":10},
    {"progress":20},
    {"progress":30},
    {"progress":40},
    {"progress":50},
    {"progress":60},
    {"progress":70},
    {"progress":80},
    {"progress":90},
    {"progress":100}
  ];
};
</script>

<style>
.progress {
  position: relative;
  height: 20px;
  margin-bottom: 0px;
  overflow: hidden;
  background-color: #e2e2e2;
  margin-bottom: 20px;
}

.progress .progress-bar {
  position: absolute;
  overflow: hidden;
  line-height: 20px;
  float: left;
  width: 0;
  height: 100%;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
  background-color: rgba(66,139,202,1);
}
</style>

やってることとしては、横長のdivの中にもういっこdivを入れて、その長さを直接sytle属性に書いて変化させてる感じですね。

ChromeやSafariなどでサンプルページを見た場合、プログレスバーが正常に表示されてます。灰色の背景の中に、数値に応じた分の長さの青いバーが表示されてます。

でもIEでサンプルページを見ると、ただの灰色のバーが10本並んでるだけにの状態になってると思います。つまりdivの中に書いた「style=”width:{{item.progress}}%”」のスタイルが反映されてないってことですね。

ng-styleを使った書き方

では今度は、style属性の代わりに、ng-style属性を使って書いてみます。

ほとんど一緒ですが、style属性を書いてるdivタグだけ、こんな風に書き換える。

<div class="progress-bar" ng-style="{width: item.progress + '%'}">{{item.progress}}%</div>

ちょっと書き方が特殊……いや、特殊ってほどでもないか。とにかく、通常の書き方とはちょっと違う。item.progressっていうAngularJSの変数のとこだけでなく、widthとか%とか、全部を{}で囲うように書きます。

これで再びサンプルページを見てみましょう。

ng-style属性を使ったプログレスバー

今度はIEで見ても、ちゃんと青いバーが表示されてるはずです。ChromeやSafariで見た場合は、style属性のときと全く同じに見えます。

もしIEで見たときに青いバーが表示されてなかったら……すまん、そのときは連絡をくれ。俺の環境だとちゃんとIEでも確認できるんだけど、何か原因があると思うから、調査します。

他のパターンをいろいろ試したわけじゃないんですが、今回の場合だけ効かないってことはないと思うんで、AngularJSを使っているなら、style属性はなるべく使わずに、ng-style属性を使って書くようにした方が良いよっていう、そんなお話ですかね、これは。

あとはまあ、今回僕が使ったのはAngularJSのバージョンが1.2とちょい古めなんで、もしかしたらもうちょい上のバージョンでは解決されてるかもしれないです。

些細なことではあるんですが、「おい、何も表示されてねーぞ」的なクレームが来たときに、「すみませんがお使いのブラウザは？」「IEだ」「あー、そりゃしゃーないっすわ。だってIEですから。それにしてもIE使ってらっしゃるなんて、ぷぷーっ」みたいな対応をして先方さんを怒らせちゃうことになってもアレですから、知っといて損はないですね。