$http之后更新多个控制器中的作用域

update scopes in multiple controllers after $http

本文关键字：控制器 作用域 http 之后 更新      更新时间：2023-09-26

我正在努力想办法做到这一点。希望有人能帮忙：）

  1. 我的Angular应用程序中有多个控制器。类似标题Ctrl和设置Ctrl

  2. 我有一个服务，它包含这样一个变量：

    var myVar = {title: 'test', settings: {color: 'black', font: 'verdana'}};

  3. 我正在进行$http.get请求以更新"；myVar"；变量。

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

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

在控制器中，您可以在YourService上观察一个var myVar，当它发生变化时，用它变为的值更新一个名为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;
        }
    }
);

在您的服务中，当您从服务器获取数据时，会创建一个对象，并将其复制到该对象，这样您的所有控制器都可以引用该对象。请看这里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>

使用工厂和服务将值传递给两个控制器。这是传递值的唯一方法

   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;
});

蛋头链接

Jsfidler链接示例

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

代码使用承诺

在您的服务类别中：

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，以设置设置数据。

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

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

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

$scope.data = serviceName

在您的视图/html中，绑定到如下数据属性：

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

就是这样！：）当serviceData变量更新视图/范围时，也会更新。这将适用于多个控制器。

相关文章：