在$ http之後的多個控制器中更新示波器

我在努力弄清楚如何做到這一點。希望任何人都可以幫助:)

我在我的Angular應用程序中有多個控制器。像titleCtrl和SettingsCtrl
我有擁有這樣的變量服務：

var myVar = {title: 'test', settings: {color: 'black', font: 'verdana'}};
我正在做$ http.get請求，以更新來自服務器的「myVar的」變量。

問題是，如何更新titleCtrl中的$ scope.title和SettingsCtrl中的$ scope.settings在http請求完成後？我知道如何在單個控制器中完成它，但是如何更新多個控制器中的$ scopes？

2014-09-04 Michael Falck Wedelgård

你在一個控制器中做得如何？ – domakas 2014-09-04 12:22:24

使用的手錶在服務變量。當它更新時，然後更新控制器範圍中的值。這裏有一個例子：

內部控制器，可以在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; 
     } 
    } 
);

來源

2014-09-04 13:31:34 sma

這工作，雖然我認爲我已閱讀$ scope。$ watch可能會導致性能問題？ – 2014-09-04 15:10:48

在某些情況下存在性能問題。這完全取決於你目前的狀況。如果您的表現是您關心的問題，那麼可以幫助您在Angular 1.3中引入一次性綁定。 https://docs.angularjs.org/guide/expression – sma 2014-09-04 16:20:43

使您的服務返回承諾對象。
然後，在控制器中，您可以定義一個成功回調函數，以便在解析承諾後在另一個控制器中獲取標題和設置。

代碼使用承諾

在服務類：

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，設置設置數據。

來源

2014-09-04 12:40:22 coder

我在考慮承諾，但代碼將如何？我仍然真的不知道它是如何工作:) – 2014-09-04 13:55:03

使用工廠和服務將值傳遞給兩個控制器。這是唯一的方式來傳遞價值

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

來源

2014-09-04 12:55:31

這個設置看起來很像我目前的，但我不認爲這將與我需要的$ http工作 – 2014-09-04 13:47:31

就在你服務創建一個對象，當你從你的服務器獲取數據時將它複製到該對象，所以你的所有控制器都可以引用該對象。請看這裏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>

來源

2014-09-04 13:31:46 sylwester

我發現在我看來，一個更好，更容易維護的解決方案。只需執行以下操作即可實現一個（或多個）控制器與服務之間的數據綁定：

讓我們假設您獲取（即$ http）並將數據存儲在您的服務（serviceName）中變量serviceData。

在控制器中引用這樣的服務，以實現到雙向數據綁定：

$scope.data = serviceName

在視圖/ HTML綁定到數據屬性是這樣的：

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

那它！ :)當你的serviceData變量更新視圖/範圍時也是如此。這將與多個控制器一起使用。

來源

2014-09-10 08:13:53

在$ http之後的多個控制器中更新示波器

回答

相關問題