AngularJS angular ui router - 將自定義數據傳遞給控制器

Question

以下是我的代碼：

 .state('tab.dash', {
      url: '/dash',
      views: {
          'tab-dash': {
              templateUrl: 'templates/tab1.html',
              controller: 'QuestionsCtrl'
              //,resolve: { type: '.net' }
          }
      }
  })

  .state('tab.friends', {
      url: '/friends',
      views: {
          'tab-friends': {
              templateUrl: 'templates/tab1.html',
              controller: 'QuestionsCtrl'
              //,resolve: { type: 'SQL' }
          }
      }
  })

我想將一個不同的自定義屬性傳遞給上面兩個路由，因為它們使用相同的Controller和View，以區分它。 我嘗試了很多東西。 請幫忙怎么做！

Answer 1

您可以按如下方式傳遞自定義數據

.state('tab.dash', {
      url: '/dash',
      data: {
        customData1: 5,
        customData2: "blue"
      },
      views: {
          'tab-dash': {
              templateUrl: 'templates/tab1.html',
              controller: 'QuestionsCtrl'
              //,resolve: { type: '.net' }
          }
      }
  })

  .state('tab.friends', {
      url: '/friends',
      data: {
        customData1: 6,
        customData2: "orange"
      },
      views: {
          'tab-friends': {
              templateUrl: 'templates/tab1.html',
              controller: 'QuestionsCtrl'
              //,resolve: { type: 'SQL' }
          }
      }
  })

在控制器中，您可以按如下方式獲取數據值

function QuestionsCtrl($state){
    console.log($state.current.data.customData1);
    console.log($state.current.data.customData2);
}

在這里閱讀更多關於這個主題的信息https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#inherited-custom-data

Answer 2

有幾個選項可以做到這一點，

對於較小的數據集，您可以使用$ cookieStore，對於低於4k的數據。另一個選項，特別是對於大型數據集，將使用本地存儲，然后在頁面加載/重新加載時檢索數據。 如果它只是非常少量的數據，或者通過多頁使用的數據，你可以使用$ rootscope，但這不是最好的選擇，因為它就像污染全局名稱空間一樣。 最后一個選項，取決於如何檢索數據，可以實現服務，這基本上是可以傳遞到各種角度范圍的單例。