Truyền dữ liệu giữa các bộ điều khiển trong Angular JS?

Tôi có một bộ điều khiển cơ bản hiển thị các sản phẩm của mình,

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

Theo quan điểm của tôi, tôi đang hiển thị các sản phẩm này trong một danh sách

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

Những gì tôi đang cố gắng làm là khi ai đó nhấp vào tên sản phẩm, tôi có một chế độ xem khác có tên giỏ hàng nơi sản phẩm này được thêm vào.

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

Vì vậy, nghi ngờ của tôi ở đây là, làm thế nào để vượt qua các sản phẩm được nhấp này từ bộ điều khiển đầu tiên đến thứ hai? tôi giả định rằng giỏ hàng cũng nên là một bộ điều khiển.

Tôi xử lý nhấp chuột sự kiện bằng cách sử dụng chỉ thị. Ngoài ra tôi cảm thấy tôi nên sử dụng dịch vụ để đạt được chức năng trên chỉ là không thể làm thế nào? bởi vì giỏ hàng sẽ được xác định trước số lượng sản phẩm được thêm vào có thể là 5/10 tùy thuộc vào người dùng trang nào. Vì vậy, tôi muốn giữ chung chung này.

Cập nhật:

Tôi đã tạo một dịch vụ để phát sóng và trong bộ điều khiển thứ hai tôi nhận được nó. Bây giờ truy vấn là làm thế nào để tôi cập nhật dom? Vì danh sách của tôi để thả sản phẩm là khá cứng.

Từ mô tả, có vẻ như bạn nên sử dụng một dịch vụ. Kiểm tra http://egghead.io/lessons/angularjs-shaming-data-b between-controlers và AngularJS Dịch vụ truyền dữ liệu giữa các bộ điều khiển để xem một số ví dụ.

Bạn có thể định nghĩa dịch vụ sản phẩm của mình (như một nhà máy) như sau:

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

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

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

  return {
    addProduct: addProduct,
    getProducts: getProducts
  };

});

Phụ thuộc tiêm dịch vụ vào cả hai bộ điều khiển.

Trong của bạn ProductController, xác định một số hành động thêm đối tượng được chọn vào mảng:

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

Trong của bạn CartController, có được các sản phẩm từ dịch vụ:

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

Làm thế nào để vượt qua sản phẩm được nhấp này từ bộ điều khiển đầu tiên đến thứ hai?

Khi nhấp vào, bạn có thể gọi phương thức gọi phát sóng :

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

và bộ điều khiển thứ hai sẽ lắng nghe trên thẻ này như:

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

Vì chúng ta không thể đưa phạm vi $ vào các dịch vụ, nên không có gì giống như phạm vi $ singleton.

Nhưng chúng ta có thể tiêm $rootScope. Vì vậy, nếu bạn lưu trữ giá trị vào Dịch vụ, bạn có thể chạy $rootScope.$broadcast('SOME_TAG', 'your value');trong phần thân Dịch vụ. (Xem mô tả @Charx về dịch vụ)

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

Vui lòng kiểm tra bài viết hay về $ Broadcast , $ emit

Giải pháp mà không cần tạo Dịch vụ, sử dụng $ rootScope:

Để chia sẻ các thuộc tính trên các bộ điều khiển ứng dụng, bạn có thể sử dụng Angular $ rootScope. Đây là một tùy chọn khác để chia sẻ dữ liệu, đưa nó để mọi người biết về nó.

Cách ưa thích để chia sẻ một số chức năng trên Bộ điều khiển là Dịch vụ, để đọc hoặc thay đổi thuộc tính toàn cầu mà bạn có thể sử dụng $ 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;
}]);

Sử dụng $ rootScope trong một mẫu (Thuộc tính truy cập với $ root):

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

Bạn có thể làm điều này bằng hai phương pháp.

1. Bằng cách sử dụng $rootscope, nhưng tôi không giới thiệu điều này. Đây $rootScopelà phạm vi hàng đầu nhất. Một ứng dụng có thể chỉ có một ứng dụng $rootScopesẽ được chia sẻ giữa tất cả các thành phần của ứng dụng. Do đó nó hoạt động như một biến toàn cầu.

2. Sử dụng dịch vụ. Bạn có thể làm điều này bằng cách chia sẻ một dịch vụ giữa hai bộ điều khiển. Mã cho dịch vụ có thể trông như thế này:

   app.service('shareDataService', function() {
       var myList = [];
   
       var addList = function(newObj) {
           myList.push(newObj);
       }
   
       var getList = function(){
           return myList;
       }
   
       return {
           addList: addList,
           getList: getList
       };
   });

   Bạn có thể thấy fiddle của tôi ở đây .

Một cách thậm chí đơn giản hơn để chia sẻ dữ liệu giữa các bộ điều khiển là sử dụng các cấu trúc dữ liệu lồng nhau. Thay vì, ví dụ

$scope.customer = {};

chúng ta có thể sử dụng

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

Các databất động sản sẽ được thừa hưởng từ cha mẹ phạm vi vì vậy chúng tôi có thể ghi đè lên các lĩnh vực của mình, hãy truy cập từ bộ điều khiển khác.

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

chúng ta có thể lưu trữ dữ liệu trong phiên và có thể sử dụng nó ở bất cứ đâu trong chương trình.

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

Nơi khác

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

Tôi đã thấy các câu trả lời ở đây và nó đang trả lời câu hỏi chia sẻ dữ liệu giữa các bộ điều khiển, nhưng tôi nên làm gì nếu tôi muốn một bộ điều khiển thông báo cho người khác về thực tế là dữ liệu đã bị thay đổi (không sử dụng phát sóng)? DỄ DÀNG! Chỉ cần sử dụng mẫu khách truy cập nổi tiếng:

myApp.service('myService', function() {

    var visitors = [];

    var registerVisitor = function (visitor) {
        visitors.push(visitor);
    }

    var notifyAll = function() {
        for (var index = 0; index < visitors.length; ++index)
            visitors[index].visit();
    }

    var myData = ["some", "list", "of", "data"];

    var setData = function (newData) {
        myData = newData;
        notifyAll();
    }

    var getData = function () {
        return myData;
    }

    return {
        registerVisitor: registerVisitor,
        setData: setData,
        getData: getData
    };
}

myApp.controller('firstController', ['$scope', 'myService',
    function firstController($scope, myService) {

        var setData = function (data) {
            myService.setData(data);
        }

    }
]);

myApp.controller('secondController', ['$scope', 'myService',
    function secondController($scope, myService) {

        myService.registerVisitor(this);

        this.visit = function () {
            $scope.data = myService.getData();
        }

        $scope.data = myService.getData();
    }
]);

Theo cách đơn giản này, một bộ điều khiển có thể cập nhật một bộ điều khiển khác mà một số dữ liệu đã được cập nhật.

Tôi đã tạo một nhà máy kiểm soát phạm vi được chia sẻ giữa mẫu của đường dẫn tuyến đường, do đó bạn có thể duy trì dữ liệu được chia sẻ ngay khi người dùng đang điều hướng trong cùng một đường dẫn chính của tuyến.

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

Vì vậy, nếu người dùng đi đến một tuyến đường khác, ví dụ '/ Hỗ trợ', dữ liệu được chia sẻ cho đường dẫn '/ Khách hàng' sẽ tự động bị hủy. Nhưng, nếu thay vì điều này, người dùng sẽ đi đến các đường dẫn 'con', như '/ Khách hàng / 1' hoặc '/ Khách hàng / danh sách' thì phạm vi sẽ không bị phá hủy.

Bạn có thể xem một mẫu ở đây: http://plnkr.co/edit/OL8of9

1

using $localStorage

app.controller('ProductController', function($scope, $localStorage) {
    $scope.setSelectedProduct = function(selectedObj){
        $localStorage.selectedObj= selectedObj;
    };
});

app.controller('CartController', function($scope,$localStorage) { 
    $scope.selectedProducts = $localStorage.selectedObj;
    $localStorage.$reset();//to remove
});

2

Khi nhấp vào, bạn có thể gọi phương thức gọi phát sóng:

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

and the second controller will listen on this tag like:
$scope.$on('SOME_TAG', function(response) {
      // ....
})

3

using $rootScope:

4

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

5

Một cách sử dụng dịch vụ góc:

var app = angular.module("home", []);

app.controller('one', function($scope, ser1){
$scope.inputText = ser1;
});

app.controller('two',function($scope, ser1){
$scope.inputTextTwo = ser1;
});

app.factory('ser1', function(){
return {o: ''};
});

Tạo một nhà máy trong mô-đun của bạn và thêm một tham chiếu của nhà máy trong bộ điều khiển và sử dụng các biến của nó trong bộ điều khiển và bây giờ lấy giá trị của dữ liệu trong bộ điều khiển khác bằng cách thêm tham chiếu bất cứ khi nào bạn muốn

Tôi không biết liệu nó có giúp được ai không, nhưng dựa trên câu trả lời của Charx (cảm ơn!) Tôi đã tạo ra dịch vụ bộ đệm đơn giản. Hãy sử dụng, phối lại và chia sẻ:

angular.service('cache', function() {
    var _cache, _store, _get, _set, _clear;
    _cache = {};

    _store = function(data) {
        angular.merge(_cache, data);
    };

    _set = function(data) {
        _cache = angular.extend({}, data);
    };

    _get = function(key) {
        if(key == null) {
            return _cache;
        } else {
            return _cache[key];
        }
    };

    _clear = function() {
        _cache = {};
    };

    return {
        get: _get,
        set: _set,
        store: _store,
        clear: _clear
    };
});

Một cách sử dụng dịch vụ góc:

var app = angular.module("home", []);

app.controller('one', function($scope, ser1){
$scope.inputText = ser1;
});


app.controller('two',function($scope, ser1){
$scope.inputTextTwo = ser1;
});

app.factory('ser1', function(){
return {o: ''};
});



<div ng-app='home'>

<div ng-controller='one'>
  Type in text: 
  <input type='text' ng-model="inputText.o"/>
</div>
<br />

<div ng-controller='two'>
  Type in text:
  <input type='text' ng-model="inputTextTwo.o"/>
</div>

</div>

https://jsfiddle.net/1w64222q/

FYI Đối tượng $ scope có $ emit, $ Broadcast, $ trên AND Đối tượng $ rootScope có $ emit, $ Broadcast, $ on giống hệt nhau

đọc thêm về xuất bản / đăng ký mẫu thiết kế trong góc ở đây

Để cải thiện giải pháp được đề xuất bởi @Maxim bằng cách sử dụng $ Broadcast, hãy gửi dữ liệu không thay đổi

$rootScope.$broadcast('SOME_TAG', 'my variable');

nhưng để nghe dữ liệu

$scope.$on('SOME_TAG', function(event, args) {
    console.log("My variable is", args);// args is value of your variable
})

Có ba cách để làm điều đó,

a) sử dụng dịch vụ

b) Khai thác tùy thuộc vào mối quan hệ cha / con giữa các phạm vi điều khiển.

c) Từ khóa "As" trong Angular 2.0 sẽ truyền dữ liệu từ bộ điều khiển này sang bộ điều khiển khác.

Để biết thêm thông tin với ví dụ, vui lòng kiểm tra liên kết dưới đây:

http://www.tutespace.com/2016/03/angular-js.html

var custApp = angular.module("custApp", [])
.controller('FirstController', FirstController)
.controller('SecondController',SecondController)
.service('sharedData', SharedData);

FirstController.$inject = ['sharedData'];
function FirstController(sharedData) {
this.data = sharedData.data;
}

SecondController.$inject['sharedData'];
function SecondController(sharedData) {
this.data = sharedData.data;
}

function SharedData() {
this.data = {
    value: 'default Value'
}
}

Bộ điều khiển đầu tiên

<div ng-controller="FirstController as vm">
<input type=text ng-model="vm.data.value" />
</div>

Bộ điều khiển thứ hai

 <div ng-controller="SecondController as vm">
    Second Controller<br>
    {{vm.data.value}}
</div>

Tôi nghĩ rằng

cách tốt nhất

app.controller('ProductController', function($scope, $localStorage) {
    $scope.setSelectedProduct = function(selectedObj){
        $localStorage.selectedObj= selectedObj;
    };
});

Thẻ kiểm soát của bạn sẽ được

app.controller('CartController', function($scope,$localStorage) { 
    $scope.selectedProducts = $localStorage.selectedObj;
    $localStorage.$reset();//to remove
});

Bạn cũng có thể thêm

if($localStorage.selectedObj){
    $scope.selectedProducts = $localStorage.selectedObj;
}else{
    //redirect to select product using $location.url('/select-product')
}