Question

我正在使用angular-ui ui-router作为网络应用程序。我有一个像这样的状态/视图配置：

...
.state('parentState', {
    url:'/:id',
    views: {
        'main@parent': {
            controller: 'ParentMainCtrl',
        },
        'sub@parent': {
            controller: 'ParentSubCtrl',
        },
    },
})
...

现在，我需要在两个州main和sub之间共享数据。一种方法是向resolve添加parentState并将依赖项注入视图的控制器，但之后我将无法在两个视图之间进行数据绑定。我尝试将data属性添加到parentState，但似乎子视图不会继承它。在这种状态下的兄弟视图之间进行双向数据绑定的方法是什么？

Answer 1

在我看来，视图路由器不应该对数据负责。

您应创建一个包含数据和操作的服务来修改该数据，然后将该服务注入您的两个控制器。

关于这一点的好处还在于，如果您希望与ParentMainCtrl和ParentSubCtrl之外的更多模块共享此数据源，则可以将该服务添加为这些模块的依赖项。

var myApp = angular.module('myApp', []);

angular.module('myApp').factory('sharedService', ['$http',
  function($http) {
    return {
      data: {},

      // functions to get/set properties in data
    }
  }
]);

angular.module('myApp').controller('ParentMainCtrl', ['$scope', 'sharedService',
  function($scope, sharedService) {
    $scope.data = sharedService.data;
  }
]);

angular.module('myApp').controller('ParentSubCtrl', ['$scope', 'sharedService',
  function($scope, sharedService) {
    $scope.data = sharedService.data;
  }
]);

http://plnkr.co/edit/WHIWUQRJNAmhQQKKJDDl?p=preview

在angularjs ui-router中的状态内的两个ui视图之间共享数据

1 个答案: