javascript - Angular Seed Notation の学習

Question

私は質問に従っていました ( ui bootstrap modal's controller 'is not defined' )。次に、ネストされたコントローラー、さまざまなスコープ呼び出し、およびコードの名前変更/リファクタリング (学習用) の変更を試みました。

My Plunkerで動作させることができなかったので、いくつか質問があります。

1. なぜ機能しないのですか？

2. 元の質問は、アプリケーション モジュールにコントローラーを追加するのではなく、新しいモジュールを作成することを示しています-なぜですか? これはお勧めですか？

3. 先祖コントローラの場合、そのメソッドは他のコントローラの定義PageControllerをどのように参照しますか?$scope.openopen

コード：

var app = angular.module('app', ['ui.bootstrap']);

app.controller('PageController', ['$scope',
  function($scope) {

    $scope.open = function() {
      // how to call ModalController.open?
    };
  }
])
  .controller('ModalController', ['$scope', '$modal', '$log',
    function($scope, $modal, $log) {
      $scope.items = ['item1', 'item2', 'item3'];

      $scope.open = function() {

        var modalInstance = $modal.open({
          templateUrl: 'myModalContent.html',
          controller: 'ModalInstanceCtrl',
          resolve: {
            items: function() {
              return $scope.items;
            }
          }
        });

        modalInstance.result.then(function(selectedItem) {
          $scope.selected = selectedItem;
        }, function() {
          $log.info('Modal dismissed at: ' + new Date());
        });
      };
    }
  ])
  .controller('ModalInstanceCtrl', ['$scope', '$modalInstance', 'items',
    function($scope, $modalInstance, items) {
      $scope.items = items;
      $scope.selected = {
        item: $scope.items[0]
      };

      $scope.ok = function() {
        $modalInstance.close($scope.selected.item);
      };

      $scope.cancel = function() {
        $modalInstance.dismiss('cancel');
      };
    }
  ]);