[javascript] Angular JS의 컨트롤러간에 데이터를 전달 하시겠습니까?

JAVASCRIPT / 글쓴이

제품을 표시하는 기본 컨트롤러가 있습니다.

App.controller('ProductCtrl',function($scope,$productFactory){
     $productFactory.get().success(function(data){
           $scope.products = data;
     });
});

내 견해로는이 제품을 목록으로 표시하고 있습니다.

<ul>
    <li ng-repeat="product as products">
        {{product.name}}
    </li>
</ul

내가하려는 것은 누군가 제품 이름을 클릭 할 때이 제품이 추가 된 cart라는 다른보기가 있습니다.

 <ul class="cart">
      <li>
          //click one added here
      </li>
      <li>
          //click two added here
      </li>
 </ul>

내 의심은 여기에서 클릭 한 제품을 첫 번째 컨트롤러에서 두 번째 컨트롤러로 어떻게 전달합니까? 카트도 컨트롤러라고 가정했습니다.

지시문을 사용하여 클릭 이벤트를 처리합니다. 또한 위의 기능을 달성하기 위해 서비스를 사용해야한다고 생각합니다. 어떻게 이해할 수 없습니까? 장바구니는 사전 정의되므로 추가 된 제품 수는 페이지 사용자에 따라 5/10이 될 수 있습니다. 그래서 나는이 일반적인 것을 유지하고 싶습니다.

최신 정보:

브로드 캐스트하는 서비스를 만들었고 두 번째 컨트롤러에서 서비스를 받았습니다. 이제 쿼리는 어떻게 dom을 업데이트합니까? 제품 삭제 목록이 꽤 하드 코딩되었으므로.

답변

설명에서 서비스를 사용해야하는 것처럼 보입니다. 확인 http://egghead.io/lessons/angularjs-sharing-data-between-controllers을 하고 컨트롤러 간 데이터를 전달 AngularJS와 서비스는 몇 가지 예를 볼 수 있습니다.

다음과 같이 제품 서비스를 공장으로 정의 할 수 있습니다.

app.factory('productService', function() {
  var productList = [];

  var addProduct = function(newObj) {
      productList.push(newObj);
  };

  var getProducts = function(){
      return productList;
  };

  return {
    addProduct: addProduct,
    getProducts: getProducts
  };

});

종속성은 서비스를 두 컨트롤러에 모두 주입합니다.

ProductController에서 선택한 객체를 배열에 추가하는 작업을 정의 하십시오 .

app.controller('ProductController', function($scope, productService) {
    $scope.callToAddToProductList = function(currObj){
        productService.addProduct(currObj);
    };
});

CartController의 서비스에서 제품을 받으십시오 .

app.controller('CartController', function($scope, productService) {
    $scope.products = productService.getProducts();
});

답변

이 클릭 한 제품을 첫 번째 컨트롤러에서 두 번째 컨트롤러로 어떻게 전달합니까?

클릭하면 브로드 캐스트 를 호출하는 메소드를 호출 할 수 있습니다 .

$rootScope.$broadcast('SOME_TAG', 'your value');

두 번째 컨트롤러는 다음과 같이이 태그를 수신합니다.

$scope.$on('SOME_TAG', function(response) {
      // ....
})

서비스에 $ scope를 주입 할 수 없기 때문에 singleton $ scope와 같은 것은 없습니다.

그러나 우리는 주입 할 수 있습니다 $rootScope. 따라서 서비스에 가치를 저장 $rootScope.$broadcast('SOME_TAG', 'your value');하면 서비스 본문에서 실행할 수 있습니다 . (서비스에 대한 @Charx 설명 참조)

app.service('productService',  function($rootScope) {/*....*/}

$ broadcast , $ emit에 대한 좋은 기사를 확인하십시오

답변

$ rootScope를 사용하여 서비스를 작성하지 않은 솔루션 :

앱 컨트롤러간에 속성을 공유하려면 Angular $ rootScope를 사용할 수 있습니다. 이것은 사람들이 정보를 알 수 있도록 데이터를 공유하는 또 다른 옵션입니다.

Controllers에서 일부 기능을 공유하는 기본 방법은 Services이며 $ rootscope를 사용할 수있는 전역 속성을 읽거나 변경하는 것입니다.

var app = angular.module('mymodule',[]);
app.controller('Ctrl1', ['$scope','$rootScope',
  function($scope, $rootScope) {
    $rootScope.showBanner = true;
}]);

app.controller('Ctrl2', ['$scope','$rootScope',
  function($scope, $rootScope) {
    $rootScope.showBanner = false;
}]);

템플리트에서 $ rootScope 사용 ($ root를 사용하여 액세스 특성) :

<div ng-controller="Ctrl1">
    <div class="banner" ng-show="$root.showBanner"> </div>
</div>

답변

두 가지 방법으로이 작업을 수행 할 수 있습니다.

  1. 를 사용 $rootscope하지만 권장하지 않습니다. 는 $rootScope최상위 범위이다. 앱에는 앱의 $rootScope모든 구성 요소간에 공유 할 앱이 하나만 있을 수 있습니다. 따라서 전역 변수처럼 작동합니다.

  2. 서비스 사용 두 컨트롤러간에 서비스를 공유하여이를 수행 할 수 있습니다. 서비스 코드는 다음과 같습니다.

    app.service('shareDataService', function() {
    var myList = [];

    var addList = function(newObj) {
        myList.push(newObj);
    }

    var getList = function(){
        return myList;
    }

    return {
        addList: addList,
        getList: getList
    };
});

    당신은 내 바이올린을 볼 수 있습니다 여기에 .

답변

컨트롤러간에 데이터를 공유하는보다 간단한 방법은 중첩 된 데이터 구조를 사용하는 것입니다. 예를 들어

$scope.customer = {};

우리는 사용할 수 있습니다

$scope.data = { customer: {} };

이 data속성은 상위 범위에서 상속되므로 다른 컨트롤러의 액세스를 유지하면서 필드를 덮어 쓸 수 있습니다.

답변

angular.module('testAppControllers', [])
    .controller('ctrlOne', function ($scope) {
        $scope.$broadcast('test');
    })
    .controller('ctrlTwo', function ($scope) {
        $scope.$on('test', function() {
        });
    });

답변

우리는 세션에 데이터를 저장하고 외부 프로그램의 어느 곳에서나 사용할 수 있습니다.

$window.sessionStorage.setItem("Mydata",data);

다른 장소

$scope.data = $window.sessionStorage.getItem("Mydata");