在两个控制器angularjs之间共享功能答案

【问题标题】：Share function between two controllers angularjs在两个控制器angularjs之间共享功能
【发布时间】：2017-05-11 21:25:25
【问题描述】：

我正在尝试在 angularjs 中的两个控制器之间创建共享资源。我在第二个控制器中使用 getData() 来获取存储的数据并填写第二个控制器内的数据表。为了简单起见，我省略了代码中的数据表部分。

以下是我的带有两个控制器的控制器文件

    (function(){
      var app = angular.module('adminCtrls',[]);
      // Main Controller
      app.controller('mainCtrl', function( $scope, $http,testSrv ){

         // Get the data form the phoenix database based on the query defined 
         // in db_size.php 
         $http.get('rest/admin/db_size.php').then(function(response){
         $scope.answers = response.data;
         $scope.me = "$scope.answer";
          testSrv.setData($scope.me);
        });
         });
      })

      // Modal Controller
      app.controller('modalCtrl', function($scope,$http,testSrv ){
      console.log(testSrv.getData());

        });

      });

  })(); // EOF

以下是我的angular应用文件

    (function(){
    // Angular App
    var app = angular.module('adminApp', ['ngRoute', 'adminCtrls', 'siteSrvs']);
    // Routing
    app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){

        // HTML5 Mode
        $locationProvider.html5Mode({
          enabled: true
        });

    }]);

    })();

这是我的服务。

(function(){

  // Phoenix Services
  var phx = angular.module('siteSrvs',[]);

  // Main
  phx.service('testSrv', function($http){

    // Data Storage
    var data = '';
    var answers = '';

    // Returned Functions
    return {
      getData : _getData,
      setData : _setData,
      getAnswers : _getAnswers
    }

    // Get Data
    function _getData(){
      return data;
    }

    // Set Data
    function _setData(t){
      if(t) data = t;
    }

    function _getAnswers(){
      return $http.get('/rest/test2/test2.php');
    }

  });

  })(); // EOF

我正在尝试在我的第一个控制器中设置数据并从我的第二个控制器中获取相同的数据。

我的第二个控制器看不到第一个控制器存储的数据。

我想知道我是否缺少任何模块注入？

【问题讨论】：

标签： angularjs dependency-injection controllers data-sharing

【解决方案1】：

我想说你的代码中的一切都是正确的，你只需要将你的模态控制器绑定到一个视图，这样它就会被调用，然后你会在你的服务中看到值：

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
  <div ng-controller="modalCtrl">{{data}}</div>
</body>

只是在作用域中添加了一个变量以在视图中打印它：

// Modal Controller
app.controller('modalCtrl', function($scope, $http, testSrv) {
   $scope.data = testSrv.getData();
   console.log('modalCtrl',$scope.data);
});

这是一个plunker，您可以自己尝试一下。

【讨论】：

我正在尝试在第二个控制器中使用 getData 方法来获取数据并在第二个控制器中填充数据表。我的问题是 getData 没有显示第一个控制器存储的数据
为了简单起见，我注释掉了对您在第一个控制器中的服务的调用。我建议您检查 setData 是否被实际调用，因为如果有任何错误将永远不会被调用。您可以在该块之外调用 setData 来测试它或捕获该调用的错误。