angularjs - 更改 ui-router 中的共享数据

Question

我想问你关于在 ui-router 中状态之间共享数据的问题。这是我的 $stateProvider 示例

$stateProvider.state('start',{
    url:"/inicio",
    templateUrl:"./app/templates/start.html",
    abstract: true,
    data:{
        title: 'Hello world'
    },
    controller: 'aplicacionController',

}).state('start.App',{
    url:"/aplicacion",
    templateUrl:"./app/templates/escritorio.html"
}).state('start.App.onlyMenu',{
    url:"/ms",
    views:{
        'menu':{
            templateUrl:"./app/templates/menu.html",
            controller:'menuController'
        },
        'mainFrame':{
            templateUrl: './app/templates/whiteBoard.html',
            controller:'whiteBoardController'
        }
    }
}).state('start.app.JqPlotCharts',{
    url:"/jqp",
    views:{
        'menu':{
            templateUrl:"./app/templates/menu.html",
            controller:'menuController'
        },
        'mainFrame':{
            templateUrl: './app/templates/jqplotcharts.html',
            controller:'jqplotCtrl'
        }
    }
});

如您所见，我有一个名为 start 的父状态，其数据字段的 title 属性值为“Hello world”。applicacionController 有两个任务:首先是读取 title 的值并存储在名为 title 的 $scope 变量中:

$scope.title = $state.current.data.title;

第二个是 watch if title 改变了，如果改变了，更新 $state.current.data.title 的值:

$scope.$watch('title', function(){
    $state.current.data.titulo = $scope.title;
});

当然，在模板 start.html 中，我有一个小表格来更改此值:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <a class="navbar-brand" href="#">{{title}}</a>
    </div>

   <!-- Collect the nav links, forms, and other content for toggling -->
   <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search" ng-model="title">
        </div>
      </form>
   </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

我的意图是所有子状态都读取 title 的值，并且当它从父模板更改时，该值也会在子状态中更新。然而，它永远不会发生。该值在父状态中更新，但从不在子状态中更新。

我错过了什么？

谢谢

Answer 1

我会尝试解释为什么应该以不同的方式来考虑这个要求。

首先，状态的 .data 设置(参见 Attach Custom Data to State Objects )，应被视为配置部分。含义:只读，常量。此外，正如 .data 继承所示，有一些智能机制可以提供与上述要求相反的功能:

Inherited Custom Data

Child states will inherit data properties from parent state(s), which they can overwrite.

$stateProvider.state('parent', {
      data:{
         customData1:  "Hello",
         customData2:  "World!"
      }
   })
   .state('parent.child', {
      data:{
         // customData1 inherited from 'parent'
         // but we'll overwrite customData2
         customData2:  "UI-Router!"
      }
   });

$rootScope.$on('$stateChangeStart', function(event, toState){ 
    var greeting = toState.data.customData1 + " " + toState.data.customData2;
    console.log(greeting);

    // Would print "Hello World!" when 'parent' is activated
    // Would print "Hello UI-Router!" when 'parent.child' is activated
})

正如我们所见，这就是我们可以通过state 的配置 和自定义.data 对象来实现的。

但是如何解决我们的问题呢？嗯，真的有原生的 Angular JS 解决方案:

Service.

这样的对象将作为一个单例工作。我们可以在任何地方拥有它，我们可以将它放入 $rootScope 中……我们可以做很多事情。但大多数情况下，我们可以将其用于数据共享。请在此处查看类似的示例和解决方案:

• Attach data dynamically to state.go function and retrieve in resolve property

这是一个名为 Settings

的起草服务

.factory('Settings', function(){
  return {
    Property1: null,
    Property2: null,
    ...
  };
})

A plunker这个例子。