[javascript] AngularJS 컨트롤러간에 데이터 공유

JAVASCRIPT / 글쓴이

컨트롤러간에 데이터를 공유하려고합니다. 유스 케이스는 다단계 양식이며 한 입력에 입력 된 데이터는 나중에 원래 컨트롤러 외부의 여러 표시 위치에서 사용됩니다. 아래와 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 dependencies
var myApp = angular.module('myApp', []);

// make a factory to share data between controllers
myApp.factory('Data', function(){
    // I know this doesn't work, but what will?
    var FirstName = '';
    return FirstName;
});

// Step 1 Controller
myApp.controller('FirstCtrl', function( $scope, Data ){

});

// Step 2 Controller
myApp.controller('SecondCtrl', function( $scope, Data ){
    $scope.FirstName = Data.FirstName;
});

도움을 주시면 감사하겠습니다.

답변

간단한 해결책은 팩토리가 객체를 반환하고 컨트롤러가 동일한 객체에 대한 참조를 사용하도록하는 것입니다.

JS :

// declare the app with no dependencies
var myApp = angular.module('myApp', []);

// Create the factory that share the Fact
myApp.factory('Fact', function(){
  return { Field: '' };
});

// Two controllers sharing an object that has a string in it
myApp.controller('FirstCtrl', function( $scope, Fact ){
  $scope.Alpha = Fact;
});

myApp.controller('SecondCtrl', function( $scope, Fact ){
  $scope.Beta = Fact;
});

HTML :

<div ng-controller="FirstCtrl">
    <input type="text" ng-model="Alpha.Field">
    First {{Alpha.Field}}
</div>

<div ng-controller="SecondCtrl">
<input type="text" ng-model="Beta.Field">
    Second {{Beta.Field}}
</div>

데모 : http://jsfiddle.net/HEdJF/

응용 프로그램이 커지고 테스트가 더 복잡해지고 더 어려워지면 공장에서 전체 객체를 이런 식으로 노출하지 않고 대신 게터 및 세터를 통해 액세스를 제한 할 수 있습니다.

myApp.factory('Data', function () {

    var data = {
        FirstName: ''
    };

    return {
        getFirstName: function () {
            return data.FirstName;
        },
        setFirstName: function (firstName) {
            data.FirstName = firstName;
        }
    };
});

이 접근 방식을 사용하면 새로운 값으로 공장을 업데이트하고 변경 사항을 감시하는 것은 소비 컨트롤러에 달려 있습니다.

myApp.controller('FirstCtrl', function ($scope, Data) {

    $scope.firstName = '';

    $scope.$watch('firstName', function (newValue, oldValue) {
        if (newValue !== oldValue) Data.setFirstName(newValue);
    });
});

myApp.controller('SecondCtrl', function ($scope, Data) {

    $scope.$watch(function () { return Data.getFirstName(); }, function (newValue, oldValue) {
        if (newValue !== oldValue) $scope.firstName = newValue;
    });
});

HTML :

<div ng-controller="FirstCtrl">
  <input type="text" ng-model="firstName">
  <br>Input is : <strong>{{firstName}}</strong>
</div>
<hr>
<div ng-controller="SecondCtrl">
  Input should also be here: {{firstName}}
</div>

데모 : http://jsfiddle.net/27mk1n1o/

답변

나는 $watch이것을 사용하지 않는 것을 선호 합니다. 전체 서비스를 컨트롤러 범위에 할당하는 대신 데이터 만 할당 할 수 있습니다.

JS :

var myApp = angular.module('myApp', []);

myApp.factory('MyService', function(){
  return {
    data: {
      firstName: '',
      lastName: ''
    }
    // Other methods or objects can go here
  };
});

myApp.controller('FirstCtrl', function($scope, MyService){
  $scope.data = MyService.data;
});

myApp.controller('SecondCtrl', function($scope, MyService){
   $scope.data = MyService.data;
});

HTML :

<div ng-controller="FirstCtrl">
  <input type="text" ng-model="data.firstName">
  <br>Input is : <strong>{{data.firstName}}</strong>
</div>
<hr>
<div ng-controller="SecondCtrl">
  Input should also be here: {{data.firstName}}
</div>

또는 직접 방법으로 서비스 데이터를 업데이트 할 수 있습니다.

JS : 

// A new factory with an update method
myApp.factory('MyService', function(){
  return {
    data: {
      firstName: '',
      lastName: ''
    },
    update: function(first, last) {
      // Improve this method as needed
      this.data.firstName = first;
      this.data.lastName = last;
    }
  };
});

// Your controller can use the service's update method
myApp.controller('SecondCtrl', function($scope, MyService){
   $scope.data = MyService.data;

   $scope.updateData = function(first, last) {
     MyService.update(first, last);
   }
});

답변

컨트롤러간에 데이터를 공유 할 수있는 많은 방법이 있습니다

  1. 서비스 사용
  2. $ state.go 서비스 사용
  3. stateparams 사용
  4. 루트 스코프 사용

각 방법에 대한 설명 :

  1. 나는 누군가가 이미 설명 한대로 설명하지 않을 것입니다

  2. 사용 $state.go

      $state.go('book.name', {Name: 'XYZ'});

  // then get parameter out of URL
  $state.params.Name;

  3. $stateparam와 비슷한 방식으로 작동하며 $state.go송신자 컨트롤러에서 객체로 객체를 전달하고 stateparam을 사용하여 수신기 컨트롤러에서 수집합니다.

  4. 사용 $rootscope

    (a) 자식 컨트롤러에서 부모 컨트롤러로 데이터 전송

      $scope.Save(Obj,function(data) {
      $scope.$emit('savedata',data);
      //pass the data as the second parameter
  });

  $scope.$on('savedata',function(event,data) {
      //receive the data as second parameter
  });

    (b) 부모에서 자식 컨트롤러로 데이터 전송

      $scope.SaveDB(Obj,function(data){
      $scope.$broadcast('savedata',data);
  });

  $scope.SaveDB(Obj,function(data){`enter code here`
      $rootScope.$broadcast('saveCallback',data);
  });

답변

경로 경로 패턴 사이의 공유 범위를 제어하는 ​​팩토리를 만들었으므로 사용자가 동일한 경로 상위 경로를 탐색 할 때만 공유 데이터를 유지할 수 있습니다.

.controller('CadastroController', ['$scope', 'RouteSharedScope',
    function($scope, routeSharedScope) {
      var customerScope = routeSharedScope.scopeFor('/Customer');
      //var indexScope = routeSharedScope.scopeFor('/');
    }
 ])

따라서 사용자가 다른 경로 경로 (예 : ‘/ Support’)로 이동하면 경로 ‘/ Customer’에 대한 공유 데이터가 자동으로 삭제됩니다. 그러나이 대신 사용자가 ‘/ Customer / 1’또는 ‘/ Customer / list’와 같은 ‘child’경로로 이동하면 범위가 손상되지 않습니다.

여기에서 샘플을 볼 수 있습니다 : http://plnkr.co/edit/OL8of9

답변

컨트롤러간에 데이터를 공유하는 방법에는 여러 가지가 있습니다

  • 각도 서비스
  • 브로드 캐스트, $ emit 방법
  • 부모-자식 컨트롤러 통신
  • $ rootscope

우리가 알고 있듯이 $rootscope데이터 전송 또는 통신에 바람직하지 않은 방법은 전체 응용 프로그램에서 사용할 수있는 전역 범위이므로

Angular Js 컨트롤러 간의 데이터 공유를 위해 Angular 서비스는 모범 사례입니다. .factory, .service
용 레퍼런스

아이 컨트롤러에 부모로부터의 데이터 전송의 경우 당신은을 통해 아이 컨트롤러에 직접 액세스 상위 데이터 수 있습니다 $scope
당신이 사용하는 경우 ui-router당신은 사용할 수있는 $stateParmasURL 매개 변수처럼 전달하는 id, name, key, 등

$broadcast컨트롤러간에 데이터를 상위에서 하위 $emit로 전송 하고 하위에서 상위 컨트롤러로 데이터를 전송하는 좋은 방법입니다.

HTML

<div ng-controller="FirstCtrl">
   <input type="text" ng-model="FirstName">
   <br>Input is : <strong>{{FirstName}}</strong>
</div>

<hr>

<div ng-controller="SecondCtrl">
   Input should also be here: {{FirstName}}
</div>

JS

myApp.controller('FirstCtrl', function( $rootScope, Data ){
    $rootScope.$broadcast('myData', {'FirstName': 'Peter'})
});

myApp.controller('SecondCtrl', function( $rootScope, Data ){
    $rootScope.$on('myData', function(event, data) {
       $scope.FirstName = data;
       console.log(data); // Check in console how data is coming
    });
});

자세한 내용은 해당 링크 를 참조하십시오$broadcast

답변

가장 간단한 해결책 :

AngularJS 서비스를 사용했습니다 .

1 단계 : SharedDataService라는 AngularJS 서비스를 만들었습니다.

myApp.service('SharedDataService', function () {
     var Person = {
        name: ''

    };
    return Person;
});

2 단계 : 두 개의 컨트롤러를 생성하고 위에 생성 된 서비스를 사용하십시오.

//First Controller
myApp.controller("FirstCtrl", ['$scope', 'SharedDataService',
   function ($scope, SharedDataService) {
   $scope.Person = SharedDataService;
   }]);

//Second Controller
myApp.controller("SecondCtrl", ['$scope', 'SharedDataService',
   function ($scope, SharedDataService) {
   $scope.Person = SharedDataService;
   }]);

3 단계 : 보기에서 생성 된 컨트롤러를 사용하십시오.

<body ng-app="myApp">

<div ng-controller="FirstCtrl">
<input type="text" ng-model="Person.name">
<br>Input is : <strong>{{Person.name}}</strong>
</div>

<hr>

<div ng-controller="SecondCtrl">
Input should also be here: {{Person.name}}
</div>

</body>

이 문제에 대한 해결책을 보려면 아래 링크를 누르십시오

https://codepen.io/wins/pen/bmoYLr

.html 파일 :

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<body ng-app="myApp">

  <div ng-controller="FirstCtrl">
    <input type="text" ng-model="Person.name">
    <br>Input is : <strong>{{Person.name}}</strong>
   </div>

<hr>

  <div ng-controller="SecondCtrl">
    Input should also be here: {{Person.name}}
  </div>

//Script starts from here

<script>

var myApp = angular.module("myApp",[]);
//create SharedDataService
myApp.service('SharedDataService', function () {
     var Person = {
        name: ''

    };
    return Person;
});

//First Controller
myApp.controller("FirstCtrl", ['$scope', 'SharedDataService',
    function ($scope, SharedDataService) {
    $scope.Person = SharedDataService;
    }]);

//Second Controller
myApp.controller("SecondCtrl", ['$scope', 'SharedDataService',
    function ($scope, SharedDataService) {
    $scope.Person = SharedDataService;
}]);

</script>


</body>
</html>

답변

angular.copy를 사용하여 $ watch를 사용하지 않는 다른 방법이 있습니다.

var myApp = angular.module('myApp', []);

myApp.factory('Data', function(){

    var service = {
        FirstName: '',
        setFirstName: function(name) {
            // this is the trick to sync the data
            // so no need for a $watch function
            // call this from anywhere when you need to update FirstName
            angular.copy(name, service.FirstName);
        }
    };
    return service;
});


// Step 1 Controller
myApp.controller('FirstCtrl', function( $scope, Data ){

});

// Step 2 Controller
myApp.controller('SecondCtrl', function( $scope, Data ){
    $scope.FirstName = Data.FirstName;
});