Saya memiliki dua pengontrol sudut:
function Ctrl1($scope) {
$scope.prop1 = "First";
}
function Ctrl2($scope) {
$scope.prop2 = "Second";
$scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}
Saya tidak dapat menggunakan Ctrl1
di dalam Ctrl2
karena tidak terdefinisi. Namun jika saya mencoba untuk meneruskannya seperti itu ...
function Ctrl2($scope, Ctrl1) {
$scope.prop2 = "Second";
$scope.both = Ctrl1.prop1 + $scope.prop2; //This is what I would like to do ideally
}
Saya mendapatkan kesalahan. Adakah yang tahu bagaimana melakukan ini?
Perbuatan
Ctrl2.prototype = new Ctrl1();
Juga gagal.
CATATAN: Kontroler ini tidak saling bersarang.
javascript
angularjs
angularjs-controller
dopatraman
sumber
sumber
Jawaban:
Salah satu cara untuk membagikan variabel di beberapa pengontrol adalah dengan membuat layanan dan menyuntikkannya ke pengontrol mana pun yang Anda inginkan.
Contoh layanan sederhana:
Menggunakan layanan di pengontrol:
Ini dijelaskan dengan sangat baik di blog ini (Pelajaran 2 dan khususnya).
Saya telah menemukan bahwa jika Anda ingin mengikat properti ini di banyak pengontrol, ia berfungsi lebih baik jika Anda mengikat ke properti objek daripada tipe primitif (boolean, string, angka) untuk mempertahankan referensi terikat.
Contoh:
var property = { Property1: 'First' };
bukannyavar property = 'First';
.UPDATE: Untuk (mudah-mudahan) membuat semuanya lebih jelas di sini adalah biola yang menunjukkan contoh:
sumber
both
menjadi fungsi dan itu akan dipanggil / dievaluasi kembali selama proses digest sudut. Lihat biola ini sebagai contoh. Juga jika Anda mengikat properti objek, Anda dapat menggunakannya secara langsung dalam tampilan Anda dan itu akan diperbarui karena data diubah mirip dengan contoh ini .getProperty()
fungsi ke lingkup dan menggunakan $ scope. $ Tonton seperti dalam contoh ini . Semoga contoh-contoh ini membantu!.service
alih-alih.factory
seperti yang dijelaskan dalam dokumen Angular. Mengapa jawaban ini dipilih begitu tinggi ketika dokumentasi menggunakan metode yang berbeda?Saya suka menggambarkan hal-hal sederhana dengan contoh sederhana :)
Ini adalah contoh yang sangat sederhana
Service
:Dan di sini jsbin
Dan ini adalah contoh yang sangat sederhana
Factory
:Dan di sini jsbin
Jika itu terlalu sederhana, berikut ini contoh yang lebih canggih
Lihat juga jawabannya di sini untuk komentar praktik terbaik terkait
sumber
var _dataObj = {};
ketika Anda mengembalikan referensi langsung ke sana ..? Itu tidak pribadi . Dalam contoh pertama yang dapat Anda lakukanthis.dataObj = {};
dan yang keduareturn { dataObj: {} };
itu adalah variabel deklarasi IMHO tidak berguna.--- Saya tahu jawaban ini bukan untuk pertanyaan ini, tetapi saya ingin orang yang membaca pertanyaan ini dan ingin menangani Layanan seperti Pabrik untuk menghindari kesulitan melakukan hal ini ----
Untuk ini, Anda perlu menggunakan Layanan atau Pabrik.
Layanan adalah PRAKTEK TERBAIK untuk berbagi data antara pengontrol yang tidak bersarang.
Anotasi yang sangat bagus tentang topik ini tentang berbagi data adalah cara mendeklarasikan objek. Saya tidak beruntung karena saya jatuh dalam perangkap Angular sebelum saya membacanya, dan saya sangat frustrasi. Jadi izinkan saya membantu Anda menghindari masalah ini.
Saya membaca dari "buku-ng: Buku lengkap tentang AngularJS" bahwa model-AngularJS yang dibuat dalam pengontrol karena data kosong SALAH!
Elemen $ scope harus dibuat seperti ini:
Dan tidak seperti ini:
Ini karena direkomendasikan (PRAKTEK TERBAIK) agar DOM (dokumen html) mengandung panggilan sebagai
Ini sangat membantu bagi pengendali bersarang jika Anda ingin pengendali anak Anda dapat mengubah objek dari pengendali induk ....
Tetapi dalam kasus Anda, Anda tidak ingin cakupan bersarang, tetapi ada aspek serupa untuk mendapatkan objek dari layanan ke pengendali.
Katakanlah Anda memiliki layanan Anda 'Pabrik' dan di ruang kembali ada objectA yang berisi objectB yang berisi objectC.
Jika dari controller Anda ingin MENDAPATKAN objectC ke dalam lingkup Anda, adalah kesalahan untuk mengatakan:
Itu tidak akan berhasil ... Alih-alih hanya menggunakan satu titik.
Kemudian, di DOM Anda dapat memanggil objectC dari objectA. Ini adalah praktik terbaik terkait dengan pabrik, dan yang paling penting, ini akan membantu untuk menghindari kesalahan yang tidak terduga dan tidak dapat ditangkap.
sumber
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.
Menggunakan $ rootScope dalam templat (Mengakses properti dengan $ root):
sumber
Sampel di atas bekerja seperti pesona. Saya baru saja melakukan modifikasi kalau-kalau saya perlu mengelola beberapa nilai. Saya harap ini membantu!
sumber
.factory
. A.service
harus digunakan "jika Anda mendefinisikan layanan Anda sebagai tipe / kelas" sesuai docs.angularjs.org/api/auto/service/$provide#serviceSaya cenderung menggunakan nilai-nilai, senang bagi siapa saja untuk membahas mengapa ini adalah ide yang buruk ..
Kemudian menyuntikkan nilai sesuai layanan.
Diatur dalam ctrl1:
dan akses dari ctrl2:
sumber
Contoh berikut menunjukkan bagaimana cara mengirimkan variabel antara pengontrol saudara kandung dan mengambil tindakan saat nilainya berubah.
Contoh penggunaan kasus: Anda memiliki filter di bilah sisi yang mengubah konten tampilan lain.
sumber
Saya ingin berkontribusi pada pertanyaan ini dengan menunjukkan bahwa cara yang disarankan untuk berbagi data antara pengontrol, dan bahkan arahan, adalah dengan menggunakan layanan (pabrik) seperti yang telah ditunjukkan, tetapi juga saya ingin memberikan Contoh praktis bagaimana cara kerja yang harus dilakukan.
Berikut adalah plunker yang berfungsi: http://plnkr.co/edit/Q1VdKJP2tpvqqJL1LF6m?p=info
Pertama, buat layanan Anda , yang akan memiliki data Anda bersama :
Kemudian, cukup suntikkan pada pengontrol Anda dan ambil data yang dibagikan di lingkup Anda:
Anda juga dapat melakukan itu untuk arahan Anda , itu bekerja dengan cara yang sama:
Semoga jawaban yang praktis dan bersih ini dapat bermanfaat bagi seseorang.
sumber
Anda dapat melakukannya dengan layanan atau pabrik. Mereka pada dasarnya sama untuk beberapa perbedaan inti. Saya menemukan penjelasan ini di thinkster.io sebagai yang paling mudah diikuti. Sederhana, to the point dan efektif.
sumber
Tidak bisakah Anda juga menjadikan properti bagian dari lingkup induk?
Saya tidak mengatakan itu benar tetapi berhasil.
sumber
NOTE: These controllers are not nested inside each other.
. Jika ini adalah pengontrol bersarang atau pengontrol yang berbagi induk yang sama ini akan berfungsi, tetapi kami tidak dapat mengharapkan itu.$parent
jika hal itu dapat dihindari. Komponen yang dapat digunakan kembali yang dirancang dengan baik tidak boleh tahu tentang orang tuanya.Ah, punya sedikit barang baru ini sebagai alternatif lain. Ini penyimpanan lokal, dan bekerja di mana sudut bekerja. Sama-sama. (Tapi sungguh, terima kasih padanya)
https://github.com/gsklee/ngStorage
Tetapkan standar Anda:
Akses nilai-nilai:
Simpan nilainya
Ingatlah untuk menyuntikkan ngStorage di aplikasi Anda dan $ localStorage di controller Anda.
sumber
Ada dua cara untuk melakukan ini
1) Gunakan layanan get / set
2)
$scope.$emit('key', {data: value}); //to set the value
sumber
Pendekatan Kedua:
Html:
Untuk lebih jelasnya lihat plunker:
http://plnkr.co/edit/cKVsPcfs1A1Wwlud2jtO?p=preview
sumber
Ctrl2
(pendengar) adalah pengendali anak dariCtrl1
. Pengendali saudara harus berkomunikasi via$rootScope
.Jika Anda tidak ingin membuat layanan maka Anda dapat melakukannya seperti ini.
sumber
Selain $ rootScope dan layanan, ada solusi alternatif yang bersih dan mudah untuk memperluas sudut untuk menambahkan data bersama:
di controller:
Properti ini milik objek 'sudut', dipisahkan dari ruang lingkup, dan dapat dibagi dalam ruang lingkup dan layanan.
Satu manfaat dari itu adalah Anda tidak harus menyuntikkan objek: mereka dapat diakses di mana saja segera setelah defination Anda!
sumber
window
objek ... Jika Anda akan mencemari sudut, mengapa tidak pergi saja dan mencemari objek jendela ...