在AngularJS控制器之间共享数据

Question

在AngularJS控制器之间共享数据

我正在尝试跨控制器共享数据。用例是一种多步形式，在一个输入中输入的数据稍后用于原始控制器外的多个显示位置。下面的代码和jsfiddle这里。

HTML

<div ng-controller="FirstCtrl">
    <input type="text" ng-model="FirstName"><!-- Input entered here -->
    <br>Input is : <strong>{{FirstName}}</strong><!-- Successfully updates here --></div><hr><div ng-controller="SecondCtrl">
    Input should also be here: {{FirstName}}<!-- How do I automatically updated it here? --></div>

JS

// declare the app with no dependenciesvar myApp = angular.module('myApp', []);
// make a factory to share data between controllersmyApp.factory('Data', function(){
    // I know this doesn't work, but what will?
    var FirstName = '';
    return FirstName;});// Step 1 ControllermyApp.controller('FirstCtrl', function( $scope, Data ){});
    // Step 2 ControllermyApp.controller('SecondCtrl', function( $scope, Data ){
    $scope.FirstName = Data.FirstName;});

任何帮助是极大的赞赏。

Answer 1

我不喜欢$watch这样做。您可以只分配数据，而不是将整个服务分配给控制器的范围。JS：var&nbsp;myApp&nbsp;=&nbsp;angular.module('myApp',&nbsp;[]);myApp.factory('MyService',&nbsp;function(){ &nbsp;&nbsp;return&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;firstName:&nbsp;'', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lastName:&nbsp;'' &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Other&nbsp;methods&nbsp;or&nbsp;objects&nbsp;can&nbsp;go&nbsp;here &nbsp;&nbsp;};});myApp.controller('FirstCtrl',&nbsp;function($scope,&nbsp;MyService){ &nbsp;&nbsp;$scope.data&nbsp;=&nbsp;MyService.data;});myApp.controller('SecondCtrl',&nbsp;function($scope,&nbsp;MyService){ &nbsp;&nbsp;&nbsp;$scope.data&nbsp;=&nbsp;MyService.data;});HTML：<div&nbsp;ng-controller="FirstCtrl"> &nbsp;&nbsp;<input&nbsp;type="text"&nbsp;ng-model="data.firstName"> &nbsp;&nbsp;<br>Input&nbsp;is&nbsp;:&nbsp;<strong>{{data.firstName}}</strong></div><hr><div&nbsp;ng-controller="SecondCtrl"> &nbsp;&nbsp;Input&nbsp;should&nbsp;also&nbsp;be&nbsp;here:&nbsp;{{data.firstName}}</div>或者，您可以使用直接方法更新服务数据。JS：//&nbsp;A&nbsp;new&nbsp;factory&nbsp;with&nbsp;an&nbsp;update&nbsp;methodmyApp.factory('MyService',&nbsp;function(){ &nbsp;&nbsp;return&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;firstName:&nbsp;'', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;lastName:&nbsp;'' &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;update:&nbsp;function(first,&nbsp;last)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;Improve&nbsp;this&nbsp;method&nbsp;as&nbsp;needed &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.data.firstName&nbsp;=&nbsp;first; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.data.lastName&nbsp;=&nbsp;last; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;};});//&nbsp;Your&nbsp;controller&nbsp;can&nbsp;use&nbsp;the&nbsp;service's&nbsp;update&nbsp;methodmyApp.controller('SecondCtrl',&nbsp;function($scope,&nbsp;MyService){ &nbsp;&nbsp;&nbsp;$scope.data&nbsp;=&nbsp;MyService.data; &nbsp;&nbsp;&nbsp;$scope.updateData&nbsp;=&nbsp;function(first,&nbsp;last)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;MyService.update(first,&nbsp;last); &nbsp;&nbsp;&nbsp;}});