AngularJS - 在属于同一状态ui-router的视图之间进行通信

时间:2016-08-19 13:27:05

标签: angularjs scope angular-ui-router

我正在开发一个AngularJS项目,我使用ui-router来生成嵌套视图。我有一个州生成多个视图。

我的问题是:如何在视图之间进行通信和发送数据? 我已经google了很多,我仍然被这个问题所困扰。我使用过$rootscope$brodcast$on,但我认为这不是最佳做法。

请帮忙吗?非常感谢你。

1 个答案:

答案 0 :(得分:1)

在嵌套视图之间传递数据与在任何其他两个视图之间传递数据没有什么不同。有两种基本方案可供构建。如果这些视图使用相同的控制器,那么您的问题完全没问题,并且您可以将相同的$ scope传递给两个视图。如果您的视图使用不同的控制器,那么问题是如何在两个控制器之间传递数据,而不管视图如何。

通过将数据存储在提供程序(例如工厂)中,然后将该工厂作为对每个控制器的依赖性而不是访问数据的需要,可以很容易地在两个或多个控制器之间传递数据。

这是一个简单的例子:

查看1 (通过路线同意分配Ctrl1)

<div>
    <h1>View 2</h1>
    <p>{{data.value}}</p>
</div>

控制器1

myApp.controller('Ctrl1', ['$scope', 'myFactory', function($scope, myFactory){
    $scope.data = myFactory.data;
}]);

查看2 (通过路线同意分配Ctrl2)

<div>
    <h1>View 2</h1>
    <p>{{data.value}}</p>
</div>

控制器2

myApp.controller('Ctrl2', ['$scope', 'myFactory', function($scope, myFactory){
    $scope.data = myFactory.data;
}]);

最后是工厂

myApp.factory('myFactory', function(){
    return {
        data: {
           value: 'some data'
        }
    }
});