Question

我正在努力弄清楚如何做到这一点。希望任何人都可以提供帮助：）

我的Angular应用中有多个控制器。像titleCtrl和SettingsCtrl
我有一个包含如下变量的服务：

var myVar = {title: 'test', settings: {color: 'black', font: 'verdana'}};
我正在制作$ http.get请求来更新＆＃34; myVar＆＃34;来自服务器的变量。

问题是，如何在http请求完成后更新settingsCtrl中的title.ctrl和$ scope.settings中的$ scope.title？我知道如何在单个控制器中执行此操作，但如何更新多个控制器中的$ scope？

Answer 1

在服务中对该变量使用监视。更新后，然后更新控制器范围中的值。这是一个例子：

在您的控制器中，您可以在myVar上观看变量YourService，当它发生变化时，使用更改为的值更新名为myVarInController的变量。

$scope.$watch(
    // This function returns the value being watched.
    function() { 
        return YourService.myVar; 
    },
    // This is the change listener, called when the value returned above changes
    function(newValue, oldValue) {
        if ( newValue !== oldValue ) {
            $scope.myVarInController = newValue;
        }
    }
);

Answer 2

制作服务返回承诺对象。
然后在控制器中，您可以定义成功回调以获取一个标题和设置一旦承诺得到解决，另一个控制者。

使用承诺的代码

在您的服务类中：

var factory = {};

var factory.fetchData = function () {
    return $http({method: 'GET', url: '/someUrl'});
}

return factory;

在控制器1中：

$scope.getData = function(){
                factory.fetchData().success(response){
                            $scope.title = response.title;
                }
               }

同样，您可以更新控制器2，以设置设置数据。

Answer 3

使用factory和service将值传递给两个控制器。这是传递值的唯一方法

   angular.module('mulipleCtrlApp', [])
    .service('shareService', function () {
    return {
        title: 'test',
        settings: {
            color: 'black',
            font: 'verdana'
        }
    };
})
    .controller('titleCtrl', function ($scope, shareService) {
    $scope.myVar = shareService;
    $scope.testchange = function () {
        $scope.myVar.title = 'Completed test';
    };
})
    .controller('settingCtrl', function ($scope, shareService) {
    $scope.myVar = shareService;
});

Egghead Link

Jsfiddler Link example

Answer 4

在您的服务中，当您从服务器获取数据时创建一个对象将其复制到该对象，因此所有控制器都可以引用该对象。请参阅此处http://plnkr.co/edit/j25GJLTHlzTEVS8HNqcA?p=preview

JS：

var app = angular.module('plunker', []);
app.service('dataSer', function($http) {
  var obj = {};

  getData = function() {

    $http.get("test.json").then(function(response) {

      angular.copy(response.data, obj);

    });

  }

  return {
    obj: obj,
    getData: getData

  };


});
app.controller('MainCtrl', function($scope, dataSer) {
  $scope.data = dataSer;
  $scope.get = function() {
    $scope.data.getData()
  }

});
app.controller('SecondCtrl', function($scope, dataSer) {
  $scope.data = dataSer;


});

HTML：

<div ng-controller="MainCtrl">
    <button ng-click="get()">get data</button>
    <p>Fist Controller:
      <br/>{{ data.obj.title}}</p>
  </div>
  <div ng-controller="SecondCtrl">

    <p>Second Controller:
      <br/>{{data.obj.settings}}</p>
  </div>

Answer 5

在我看来，我发现了一种更好，更容易维护的解决方案。只需执行以下操作即可实现一个（或多个）控制器与服务之间的数据绑定：

让我们假设您获取（即$ http）并在服务（serviceName）中将数据存储在变量serviceData中。

在你的控制器中引用这样的服务来实现数据绑定：

$scope.data = serviceName

在你的视图中/ html绑定到这样的数据属性：

<input ng-model="data.serviceData.title">

多数民众赞成！ :)当您的serviceData变量更新视图/范围时也是如此。这适用于多个控制器。

在$ http之后更新多个控制器中的范围

5 个答案: