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

时间:2017-05-11 21:25:25

标签: angularjs dependency-injection controllers data-sharing

我正在尝试在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

以下是我的角度应用程序文件

    (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

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

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

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

1 个答案:

答案 0 :(得分:0)

我会说你的代码中的所有内容都是正确的,你只需将你的模态控制器绑定到一个视图就可以调用它,然后你就会看到你服务中的值:

<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可以自己试试。