AngularJSが動かないときの確認ポイント

バインド{{}}が表示されている場合、AngularJSがうまく動作していない可能性があります。

下記ポイントを確認しましょう。

  • スペルミス
  • ng-controller="[空]"
  • ng-controller="[存在しない定義]"

AngularJS動作しない例

<html ng-app>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
 <script>
var loopCtrl = function($scope) {
 $scope.week = [
  {"jp":"月","en":"Monday"},
  {"jp":"火","en":"Tuesday"},
  {"jp":"水","en":"Wednesday"},
  {"jp":"木","en":"Thursday"},
  {"jp":"金","en":"Friday"},
  {"jp":"土","en":"Saturday"},
  {"jp":"日","en":"Sunday"}
 ];
}
 </script>
 
 <div ng-controller="hoge"></div>
 
 <div ng-controller="loopCtrl">
  <p>{{week.length}} days</p>
   <ul>
    <li ng-repeat="day in week">{{day.jp}} {{day.en}}</li>
   </ul>
 </div>
</html>
	

[ng-controller="hoge"]はJavaScriptで定義されていないため、AngularJS動作しません。 また、[ng-controller=""]の場合もAngularJS動作しませんので注意が必要です。