AngularJS-将数据从父路由控制器共享到页面上的所有子指令

我有一个包含多个组件的页面，我已经将每个组件创建为一个指令。当第一次加载页面时，我会获取页面上应该可用的所有数据。因此，该路由的所有数据都存在于控制器上，我们只需调用

pageCtrl

。然后我一直在做的是通过属性将任何必需的数据绑定到每个指令，这当然会为每个指令创建一个隔离的作用域

我知道有几种方法可以共享数据，所以在这种情况下，有推荐的方法吗？还是有人用一种特殊的方式取得了更好的成功？虽然它的工作方式非常好，我这样做，我遇到了一些警告。如果我只需要

pageCtrl

中的一点信息，我需要向指令添加另一个属性。因此，它最终会在指令元素本身上创建更多代码

我正在考虑创建一个

服务

，它将存储所有数据，

pageCtrl

可以初始化这些数据，而不是将其自身设置。任何反馈都将不胜感激。

好问题：）

第一个解决方案是在父控制器对象中创建，并将该对象（通过ng模型）传递给所有指令。此对象将通过引用（而不是通过值）传递，因此控制器和所有指令都可以访问同一对象

```

//在控制器中
$scope.shared_data={someItems:[]}；
//在html中

第二个解决方案是创建一些简单的服务来存储所有这些数据。

//在这个解决方案中，您必须向指令控制器注入额外的服务

（第2点的扩展思想）创建服务/工厂，负责收集和返回数据。该服务可以注入到指令中，并使用相同的方法收集数据。为了避免多次调用API（REST），它可以为每个敏感方法提供一些缓存

通过事件进行沟通。。。。（可能是您示例中的WORST解决方案）

前两个想法可能是最好的，我不知道您产品的完整规格，所以最终的解决方案由您选择：）。 我的建议是尝试/使用所有这些方法来真正了解正在发生的事情以及如何以及何时使用它们：）

好问题：）

第一个解决方案是在父控制器对象中创建，并将该对象（通过ng模型）传递给所有指令。此对象将通过引用（而不是通过值）传递，因此控制器和所有指令都可以访问同一对象

```

//在控制器中
$scope.shared_data={someItems:[]}；
//在html中

第二个解决方案是创建一些简单的服务来存储所有这些数据。

//在这个解决方案中，您必须向指令控制器注入额外的服务

（第2点的扩展思想）创建服务/工厂，负责收集和返回数据。该服务可以注入到指令中，并使用相同的方法收集数据。为了避免多次调用API（REST），它可以为每个敏感方法提供一些缓存

通过事件进行沟通。。。。（可能是您示例中的WORST解决方案）

前两个想法可能是最好的，我不知道您产品的完整规格，所以最终的解决方案由您选择：）。

---

我的建议是尝试/使用所有这些方法，以真正了解正在发生的事情以及如何以及何时使用它们：）

您可以使用

$parent

从child directive controller直接调用父控制器

   App.controller('aCtrl', ['$scope', function ($scope) {
                           $scope.refresh=function(){
                               ..........  //Updated Data get from DB
                              };
                               ...........
                          }]);

   App.directive('bDirective',function(){
                    restrict: 'EC',
                    replace: true,
                    scope: {},
                    controller: function($scope) {
                        $scope.$parent.refresh();
                    } 
                     ...
            });


    HTML:
    <div ng-controller="aCtrl">
         <div class="bDirective"></div> //directive
    </div>  

App.controller（'aCtrl'，['$scope'，函数（$scope）{
$scope.refresh=function（）{
……从数据库获取更新的数据
};
...........
}]);
App.directive（'bDirective'，function（）{
限制：“EC”，
替换：正确，
作用域：{}，
控制器：功能（$scope）{
$scope.$parent.refresh（）；
} 
...
});
HTML:
//指示

您可以使用

$parent

从子指令控制器直接调用父控制器

   App.controller('aCtrl', ['$scope', function ($scope) {
                           $scope.refresh=function(){
                               ..........  //Updated Data get from DB
                              };
                               ...........
                          }]);

   App.directive('bDirective',function(){
                    restrict: 'EC',
                    replace: true,
                    scope: {},
                    controller: function($scope) {
                        $scope.$parent.refresh();
                    } 
                     ...
            });


    HTML:
    <div ng-controller="aCtrl">
         <div class="bDirective"></div> //directive
    </div>  

App.controller（'aCtrl'，['$scope'，函数（$scope）{
$scope.refresh=function（）{
……从数据库获取更新的数据
};
...........
}]);
App.directive（'bDirective'，function（）{
限制：“EC”，
替换：正确，
作用域：{}，
控制器：功能（$scope）{
$scope.$parent.refresh（）；
} 
...
});
HTML:
//指示

我认为使用服务是共享数据的推荐方式如果您使用的是ui路由器，则每个路由都有一个数据选项，可以通过$state.current访问。数据只需将包含数据的对象传递给指令作用域。这样，当需要传递更多数据时，就不必担心向指令添加更多属性。您只需通过在对象中创建一个新属性将此数据添加到该对象中。但传递数据的最佳方式是使用服务。这也将确保数据在整个应用程序中是持久的。如果情况并非如此，并且您不想在整个应用程序中拥有持久数据，您可以尝试使用子视图而不是指令。这些视图可以访问父视图