Melewati data antara pengontrol di Angular JS?

Saya memiliki pengontrol dasar yang menampilkan produk saya,

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

Dalam pandangan saya, saya menampilkan produk ini dalam daftar

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

Apa yang saya coba lakukan adalah ketika seseorang mengklik nama produk, saya memiliki pandangan lain bernama keranjang tempat produk ini ditambahkan.

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

Jadi keraguan saya di sini adalah, bagaimana cara melewati produk yang diklik ini dari pengontrol pertama ke kedua? Saya berasumsi bahwa kereta harus menjadi pengontrol juga.

Saya menangani event klik menggunakan arahan. Saya juga merasa saya harus menggunakan layanan untuk mencapai fungsionalitas di atas hanya tidak tahu bagaimana caranya? karena keranjang akan ditentukan sebelumnya jumlah produk yang ditambahkan bisa 5/10 tergantung pada pengguna halaman mana. Jadi saya ingin menyimpan generik ini.

Memperbarui:

Saya membuat layanan untuk menyiarkan dan di controller kedua saya menerimanya. Sekarang pertanyaannya adalah bagaimana cara saya memperbarui dom? Karena daftar saya untuk menjatuhkan produk cukup hardcode.

Dari uraian, sepertinya Anda harus menggunakan layanan. Lihat http://egghead.io/lessons/angularjs-sharing-data-between-controllers dan Layanan AngularJS Melewati Data Antar Pengendali untuk melihat beberapa contoh.

Anda dapat mendefinisikan layanan produk Anda (sebagai pabrik) sebagai berikut:

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

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

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

  return {
    addProduct: addProduct,
    getProducts: getProducts
  };

});

Ketergantungan memasukkan layanan ke kedua pengontrol.

Di Anda ProductController, tentukan beberapa tindakan yang menambahkan objek yang dipilih ke array:

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

Di Anda CartController, dapatkan produk dari layanan:

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

bagaimana cara melewati produk yang diklik ini dari pengontrol pertama ke kedua?

Pada klik Anda dapat memanggil metode yang meminta siaran :

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

dan controller kedua akan mendengarkan tag ini seperti:

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

Karena kami tidak dapat memasukkan $ scope ke dalam layanan, tidak ada yang seperti $ scope tunggal.

Tapi kita bisa menyuntikkan $rootScope. Jadi, jika Anda menyimpan nilai ke dalam Layanan, Anda dapat menjalankannya $rootScope.$broadcast('SOME_TAG', 'your value');di badan Layanan. (Lihat deskripsi @Charx tentang layanan)

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

Silakan periksa artikel bagus tentang $ broadcast , $ emit

Solusi tanpa membuat Layanan, menggunakan $ rootScope:

Untuk berbagi properti di Pengontrol aplikasi, Anda dapat menggunakan Angular $ rootScope. Ini adalah pilihan lain untuk berbagi data, menaruhnya agar orang tahu tentangnya.

Cara yang disukai untuk berbagi beberapa fungsionalitas di Pengontrol adalah Layanan, untuk membaca atau mengubah properti global yang dapat Anda gunakan $ 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;
}]);

Menggunakan $ rootScope dalam templat (Mengakses properti dengan $ root):

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

Anda dapat melakukan ini dengan dua metode.

1. Dengan menggunakan $rootscope, tapi saya tidak merekomendasikan ini. The $rootScopeadalah paling atas lingkup. Sebuah aplikasi hanya dapat memiliki satu $rootScopeyang akan dibagikan di antara semua komponen aplikasi. Karenanya ia bertindak seperti variabel global.

2. Menggunakan layanan. Anda dapat melakukan ini dengan berbagi layanan antara dua pengontrol. Kode untuk layanan mungkin terlihat seperti ini:

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

   Anda bisa melihat biola saya di sini .

Cara yang bahkan lebih sederhana untuk berbagi data antara pengontrol menggunakan struktur data bersarang. Alih-alih, misalnya

$scope.customer = {};

kita bisa menggunakan

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

The dataproperti akan diwarisi dari lingkup orangtua sehingga kita dapat menimpa bidang nya, menjaga akses dari kontroler lain.

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

kita dapat menyimpan data dalam sesi dan dapat menggunakannya di mana saja di luar program.

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

Tempat lain

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

Saya melihat jawabannya di sini, dan ini menjawab pertanyaan berbagi data antara pengontrol, tetapi apa yang harus saya lakukan jika saya ingin satu pengontrol memberi tahu yang lain tentang fakta bahwa data telah diubah (tanpa menggunakan siaran)? MUDAH! Hanya menggunakan pola pengunjung yang terkenal:

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();
    }
]);

Dengan cara sederhana ini, satu pengontrol dapat memperbarui pengontrol lain yang beberapa data telah diperbarui.

Saya telah membuat pabrik yang mengontrol ruang lingkup bersama di antara pola jalur rute, sehingga Anda dapat mempertahankan data bersama hanya saat pengguna menavigasi di jalur induk rute yang sama.

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

Jadi, jika pengguna pergi ke jalur rute lain, misalnya '/ Dukungan', data bersama untuk jalur '/ Pelanggan' akan secara otomatis dihancurkan. Tetapi, jika alih-alih ini, pengguna pergi ke jalur 'anak', seperti '/ Pelanggan / 1' atau '/ Pelanggan / daftar' lingkup tidak akan hancur.

Anda dapat melihat contoh di sini: 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

Pada klik Anda dapat memanggil metode yang meminta siaran:

$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

Salah satu cara menggunakan layanan sudut:

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: ''};
});

Buat pabrik di modul Anda dan tambahkan referensi pabrik di controller dan gunakan variabelnya di controller dan sekarang dapatkan nilai data di controller lain dengan menambahkan referensi di mana pun Anda inginkan

Saya tidak tahu apakah itu akan membantu siapa pun, tetapi berdasarkan jawaban Charx (terima kasih!), Saya telah membuat layanan cache sederhana. Silakan gunakan, remix, dan bagikan:

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
    };
});

Salah satu cara menggunakan layanan sudut:

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 $ scope Object memiliki $ emit, $ broadcast, $ on AND $ rootScope Object memiliki $ emit, $ broadcast, $ on yang identik

baca lebih lanjut tentang mempublikasikan / berlangganan pola desain di sudut sini

Untuk meningkatkan solusi yang diusulkan oleh @Maxim menggunakan $ broadcast, kirim data tidak berubah

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

tetapi untuk mendengarkan data

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

Ada tiga cara untuk melakukannya,

a) menggunakan layanan

b) Mengeksploitasi tergantung hubungan orang tua / anak antara cakupan pengontrol

c) Dalam Angular 2.0 "As" kata kunci akan meneruskan data dari satu pengontrol ke yang lain.

Untuk informasi lebih lanjut dengan contoh, Silakan periksa tautan di bawah ini:

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'
}
}

Pengendali Pertama

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

Kontroler Kedua

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

saya pikir

Cara terbaik

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

CardController Anda akan menjadi

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

Anda juga bisa menambahkan

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