Angularjs 在两个不同的控制器之间通信

Angularjs 在两个不同的控制器之间通信,angularjs,Angularjs,我有一个angular应用程序,其中我们有4个不同的页面。每个页面都有自己的控制器。有一个主页,其中有一个控制器,该控制器路由到每个页面及其使用的控制器 when('/a',{ templateUrl: './components/a.html', controller:'aCtrl' }). when('/b',{ templateUrl: './components/b.html', co

我有一个angular应用程序,其中我们有4个不同的页面。每个页面都有自己的控制器。有一个主页,其中有一个控制器,该控制器路由到每个页面及其使用的控制器

when('/a',{
            templateUrl: './components/a.html',
            controller:'aCtrl'
    }).
when('/b',{
            templateUrl: './components/b.html',
            controller:'bCtrl'
    }).
when('/c',{
            templateUrl: './components/c.html',
            controller:'cCtrl'
    }).
when('/d',{
            templateUrl: './components/d.html',
            controller:'dCtrl'
    }).
when('/home',{
            templateUrl: './components/Home.html',
            controller:homeCtrl'
}).

现在我想在这些控制器/页面之间共享一些数据或一些常用函数。我们怎样才能做到这一点?我在谷歌上搜索过他们说的使用服务。但我不知道我需要在哪个控制器中编写服务。有人能举个好例子吗。

AngularJS中的服务不是在控制器中编写的。它直接绑定到应用程序,可以在应用程序中的任何位置使用。这就是为什么在AngularJS中,服务是控制器之间推荐的通信方式

您需要做的是编写如下服务:

angular.module('yourApp').service('serviceName',function(){……})

在服务中,您可以:

  • 从API端点获取数据(您可以为此使用
    $http
    提供程序)
  • 定义常量数据(您可以为此使用Angular的
    常量
    提供程序)
  • 定义一些代码,接收一些数据并对其进行操作,然后返回新数据
  • 几乎所有你想用你的数据做的事情
现在,将服务作为依赖项包含在控制器中,如下所示:

angular.module('yourApp').controller('yourController', function (serviceName) {
  console.log(serviceName.getData());
  // Do something with your data
});

现在,在这个控制器中,您可以访问服务返回的数据。当然,相同的服务可以注入多个控制器,从而使跨控制器共享数据成为可能。

Dustin的方法是正确的。但是,有时您可以使用不同的方法,即将应用程序包装到AppController中

现在可以访问AppController中的所有内容。您可以使用这种方法放置希望应用程序的子控制器能够访问的函数或常量,而不必到处注入服务

<body ng-controller="AppController">
    <div ng-view></div>
</body>

您可以通过多种方式共享数据

  • 事件
  • 服务
  • $rootScope
  • 服务为我们在整个应用程序中共享数据和功能提供了一种简单的方式。我们创建的服务是可以注入控制器和其他服务的单例,这使它们成为编写可重用代码的理想场所

    var app = angular.module('app', []);
    
    app.controller('leftCtrl', function ($scope,userService) {
    left.btnClicked = function (object) {
       userService.saveData(object);
    }
    });
    
    app.controller('rightCtrl', function ($scope, userService) {
    $scope.getData = userService.getData();
    });
    
    app.service('userService', function () {
       var data = {};
       this.saveData = function(object){
       data = object;
    }
    
    this.getData = function(){
    return data;
    }
    });
    

    好啊我添加了一个sServ.js,其中包含angular.module('myApp').service('sServ',['$resource','$scope','usSpinnerService',function($resource,$scope,usSpinnerService){$scope.test=function(){}]);现在在我的控制器1中,var app=angular.module('GMod',['ivh.treeview','angularSpinner']);控制器('gModCtrl',['sServ',function(sServ){//我如何调用routeChangeStart或startSpin或任何其他函数}]);它给了我一个错误,
    startSpin
    在哪里存在?如果要调用服务中的某个内容,首先需要在服务主体中将其定义为
    this.startSpin
    ,然后在控制器中将其用作
    sServ.startSpin
    ,在这种情况下,您可以像我提到的那样使用它,首先将其注入控制器,然后调用
    sServ.startSpin