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，但这不是最好的选择，因为它就像污染全局名称空间一样。 最后一个选项，取决于如何检索数据，可以实现服务，这基本上是可以传递到各种角度范围的单例。