在控制器/指令之间传递数据答案

【问题标题】：Passing data between controllers/directives在控制器/指令之间传递数据
【发布时间】：2018-11-01 08:03:29
【问题描述】：

我知道这个问题已经得到解答并且使用服务是要走的路，但我不知道如何实现它。并且非常感谢一些指导。

我正在尝试在Blur-Admin 框架中实现这一目标。

结构如下：

在顶部，有dashboard.module.js：

    (function () {
  'use strict';

      angular.module('BlurAdmin.pages.dashboard', [])
          .config(routeConfig);

      /** @ngInject */
      function routeConfig($stateProvider) {
        $stateProvider
            .state('dashboard', {
              url: '/dashboard',
              templateUrl: 'app/pages/dashboard/dashboard.html',
              title: 'Dashboard',
              sidebarMeta: {
                icon: 'ion-android-home',
                order: 0,
              },
            });
      }

    })();

然后dashboard.html是用元素定义的。

    <div class="row">
         <dashboard-line-chart></dashboard-line-chart>
    </div>
    <div class="row">
        <dashboard-todo></dashboard-todo>
    </div>
...
...

之后，这些元素中的每一个都使用指令编写：

(function () {
    'use strict';

    angular.module('BlurAdmin.pages.dashboard')
        .directive('dashboardLineChart', dashboardLineChart);

    /** @ngInject */
    function dashboardLineChart() {
        return {
            restrict: 'E',
            controller: 'DashboardLineChartCtrl',
            templateUrl: 'app/pages/dashboard/dashboardLineChart/dashboardLineChart.html'
        };
    }
})();

然后对应的Controller为：

(function () {
  'use strict';

  angular.module('BlurAdmin.pages.dashboard')
      .controller('DashboardLineChartCtrl', DashboardLineChartCtrl);

  /** @ngInject */
  function DashboardLineChartCtrl(baConfig, layoutPaths, baUtil) {...}

我想做的是在两个这样的控制器之间共享数据。 例如：

function DashboardLineChartCtrl(baConfig, layoutPaths, baUtil, sharedData) {...}

和

function DashboardDataReceiver(baConfig, layoutPaths, baUtil, sharedData) {...}

如果服务是要走的路，我应该在哪里定义服务？

非常感谢任何帮助。

谢谢。

【问题讨论】：

我不确定我是否理解了这个问题，但正如您对指令和控制器所做的那样，您只需创建一个.service。
@Lex 谢谢。但我感到困惑的是，“在哪里”创建服务？我可以在任何一个模块中创建它吗？
是的。当您使用不带空数组参数的angular.module('BlurAdmin.pages.dashboard') 时，您只是在现有应用程序模块上定义了一个新对象。所以只需添加angular.module('BlurAdmin.pages.dashboard').service('sharedData', SharedData);，然后像控制器函数一样编写SharedData 函数。

标签： angularjs angularjs-directive angular-components

【解决方案1】：

例如，您可以使用 getter 和 setter 定义一个新的服务工厂，如下所示：

app.factory('sharedData', function () {
    var x = "";
    return {
        'getX': function () { return x; },
        'setX': function (newVal) { x = newVal; }
    }
});

接下来，您必须在编写时将服务注入控制器。最后，您可以通过控制器中的服务设置和获取数据，例如：

sharedData.setX("some string"); // to set the x var into service with "some string"
sharedDate.getX(); // to get the x var content (in this case, "some string")

引用 Angular Js 文档：

AngularJS 服务是：

延迟实例化——AngularJS 仅在应用程序组件依赖于它。

Singleton – 每个组件依赖于服务获取对单个实例的引用 由服务工厂生成。

这意味着您可以定义变量并将它们的值更新到工厂实例中，并从您注入它的每个控制器中访问它。

【讨论】：