web-dev-qa-db-ja.com

UIルーターを使用したスコープとコントローラーのインスタンス化

コントローラがインスタンス化されるタイミングについて混乱しています。また、状態をネストするときにコントローラーはどのようにインスタンス化されますか。スコープがビューとコントローラーにアタッチされる方法、つまり、すべてのビューが独自のコントローラーとスコープを取得する場合、または同じスコープを共有する場合、混乱する可能性があります。

コントローラーがインスタンス化されるタイミングを誰かが説明できますか？ネストされたルートでは、すべてのビューが1つのコントローラーとスコープを共有しますか？状態を切り替えて状態に戻ると、別のコントローラーがインスタンス化されますか？

以下は私のルート（設定ファイル）です：

.config (googleAnalyticsCordovaProvider, $stateProvider, $urlRouterProvider, IdleProvider, KeepaliveProvider) ->

   $stateProvider

  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppController'
  })

  .state('app.pincode', {
    url: '/pincode',
    views: {
      menuContent: {
        templateUrl: 'templates/pincode-yield.html',
        controller: 'PincodeController'
      }
    }
  })

  .state('app.pincode.create', {
    url: '/create',
    views: {
      pincode: {
        templateUrl: 'templates/pincode-create.html',
        controller: 'PincodeController'
      }
    }
  })

  .state('app.pincode.pincodeLogin', {
    url: '/login',
    views: {
     pincode: {
        templateUrl: 'templates/pincode-login.html',
        controller: 'PincodeController'
      }
    }
  })

  .state('app.pincode.settings', {
    url: '/settings',
    views: {
      pincode: {
        templateUrl: 'templates/settings.html',
        controller: 'PincodeController'
      }
    }
  })
angularjsangularjs-scopeangular-ui-routerangularjs-routing
25
eNddy

対応するビューが初めてロードされると、コントローラーがインスタンス化されます。

たとえば、3つのコントローラーに関連付けられた3つのタブがある場合、デフォルトビューに関連付けられたコントローラーが最初にインスタンス化されます。次に、他のビューをロードすると、関連するコントローラーもインスタンス化されます。

しかし興味深いことに、ビューがDOMにロードされると、デフォルトでキャッシュされます。ビューから移動すると、その要素はDOMに残り、そのスコープは$ watchサイクルから切断されます。すでにキャッシュされているビューに移動すると、そのスコープが再接続され、DOMに残っていた既存の要素がアクティブビューになります。

2
Arup Bhattacharya

特定の状態にアクセスすると、コントローラーがインスタンス化されます。たとえば、初めてapp.pincode.pincodeLoginにアクセスすると、1つのAppControllerと2つのPincodeControllersが構築され、それぞれがテンプレートが正しいことを前提とする独自のビューを持ちます。 'app.pincode.settings'に切り替えると、最も内側のコントローラーが破壊され、新しいコントローラーに置き換えられますが、階層の上位にある2つのコントローラーは変更されません。スコープは標準のAngularJSの継承パターンに従い、分離されていません。

サブ状態のコントローラーを削除する（および親コントローラーでビジネスロジックを処理する）か、各状態に個別のコントローラーを使用することをお勧めします-通常、異なるテンプレートとビューの同じコントローラーは、デザインが悪いことを示しています。

2
Pyetras