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

AngularJS でコントローラーをネストする

javascript angular

AngularJS ではコントローラーを入れ子にして、ng-repeat で処理するコレクションの要素1つ1つに子コントローラーをバインドすることができる。

例えば、よく見かける ToDo アプリのサンプルだとこんな感じ。

<!DOCTYPE html>
<html ng-app>
  <head>
    <meta charset="utf-8">
    <title>Angular Sample</title>
    <style type="text/css">
      .done-true {
        text-decoration: line-through;
        color: grey;
      }
    </style>
    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript">
      function MainCtrl($scope) {
        $scope.newTodo = "";
        $scope.todos = [];

        $scope.addTodo = function() {
          $scope.todos.push({
            name: $scope.newTodo,
            completed: false
          });
          $scope.newTodo = "";
        };
      };

      function TodoCtrl($scope, $window) {
        $scope.destroy = function() {
          if (!$window.confirm($scope.todo.name + "を削除していいですか?")){
            return;
          }

          // 親(MainCtrl) の todos にアクセスできる
          for (var i = 0, len = $scope.todos.length; i < len; i++) {
            if ($scope.todos[i] === $scope.todo) {
              $scope.todos.splice(i, 1);
              break;
            }
          }
        };
      };
    </script>
  </head>
  <body ng-controller="MainCtrl">
    <input type="text" ng-model="newTodo" placeholder="Input Todo"/>
    <button ng-click="addTodo()">Add</button>
    <table>
      <tr ng-repeat="todo in todos" ng-controller="TodoCtrl">
        <td><input type="checkbox" ng-model="todo.completed"/></td>
        <td><span class="done-{{todo.completed}}">{{ todo.name }}</span></td>
        <td><a href="#" ng-click="destroy()">[x]</a></td>
      </tr>
    </table>
  </body>
</html>

子コントローラーにバインドされた、コレクションの各要素には $scoep からアクセスできるし、親コントローラーの $scope で格納したデータにもアクセスできる。