Bagaimana cara menggunakan $ rootScope di Angular untuk menyimpan variabel?

217

Bagaimana cara saya gunakan $rootScopeuntuk menyimpan variabel dalam pengontrol yang ingin saya akses nanti di pengontrol lain? Sebagai contoh:

angular.module('myApp').controller('myCtrl', function($scope) {
  var a = //something in the scope
  //put it in the root scope
});

angular.module('myApp').controller('myCtrl2', function($scope) {
  var b = //get var a from root scope somehow
  //use var b
});

Bagaimana saya melakukan ini?

trysis
sumber
1
Anda harus menyuntikkan $ rootScope di controller dan menggunakannya sebagai javascript sederhana
Ajay Beniwal
30
$ rootScope bukan cara yang tepat untuk melakukan ini. Menyediakan variabel di beberapa pengendali cukup banyak untuk layanan apa.
Steve
11
@Steve: FAQ Angular mengatakan "jangan membuat layanan yang tujuan hidupnya hanya untuk menyimpan dan mengembalikan bit data" Ini akan menempatkan terlalu banyak beban pada siklus $ digest ..
Marwen Trabelsi
Jika saya tidak dapat menyuntikkan kontroler ke layanan, bagaimana cara mengirim variabel dari layanan yang Anda katakan ke controller saya yang lain? Saya melihat tidak ada cara untuk mendapatkan ini bekerja ... menghargai wawasan Anda di sini ..
mendarat
2
baik, karena itu tidak disuntikkan, Anda akan memerlukan jarum suntik untuk itu ..
Xsmael

Jawaban:

248

Variabel yang diatur pada root-scope tersedia untuk lingkup controller melalui pewarisan prototypical.

Berikut ini adalah versi modifikasi dari demo @ Nitish yang menunjukkan hubungannya sedikit lebih jelas: http://jsfiddle.net/TmPk5/6/

Perhatikan bahwa variabel rootScope diatur ketika modul diinisialisasi, dan kemudian masing-masing ruang lingkup yang diwarisi mendapatkan salinan mereka sendiri yang dapat diatur secara independen ( changefungsi). Selain itu, nilai rootScope juga dapat diperbarui ( changeRsfungsi dalam myCtrl2)

angular.module('myApp', [])
.run(function($rootScope) {
    $rootScope.test = new Date();
})
.controller('myCtrl', function($scope, $rootScope) {
  $scope.change = function() {
        $scope.test = new Date();
    };

    $scope.getOrig = function() {
        return $rootScope.test;
    };
})
.controller('myCtrl2', function($scope, $rootScope) {
    $scope.change = function() {
        $scope.test = new Date();
    };

    $scope.changeRs = function() {
        $rootScope.test = new Date();
    };

    $scope.getOrig = function() {
        return $rootScope.test;
    };
});
Jason
sumber
7
Plus 1 untuk ... uh ... benar-benar menjawab pertanyaan OP. (Meskipun @ MBielski dan yang lainnya benar).
Rap
Jika saya melakukan $scope.test = 'Some value', akankah $rootScope.testperubahan juga?
Allen Linatoc
@ AllenLinatoc tidak, itu tidak akan mereka dua objek yang berbeda meskipun ruang lingkup $rootScope global (atas semua pengontrol) tetapi $scopetetap lokal ke controller. Jika Anda menggunakan $scope.testdua pengontrol yang berbeda, ketahuilah mereka adalah dua variabel yang berbeda apakah $rootScope.test akan menjadi variabel yang sama di semua pengontrol
Xsmael
Saya berasumsi Anda tidak ingin sering menggunakan $ rootScope karena alasan yang sama Anda tidak akan menggunakan variabel global dalam bahasa lain?
Zypps987
Berapa banyak variabel rootscope yang bisa kita buat di aplikasi?
Jay
161

Berbagi data antara pengontrol adalah hal yang sangat baik untuk Pabrik / Layanan. Singkatnya, ini berfungsi seperti ini.

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

app.factory('items', function() {
    var items = [];
    var itemsService = {};

    itemsService.add = function(item) {
        items.push(item);
    };
    itemsService.list = function() {
        return items;
    };

    return itemsService;
});

function Ctrl1($scope,items) {
    $scope.list = items.list; 
}

function Ctrl2($scope, items) {
    $scope.add = items.add;
}

Anda dapat melihat contoh kerja di biola ini: http://jsfiddle.net/mbielski/m8saa/

MBielski
sumber
49
+1 Tidak $rootScopeboleh digunakan untuk berbagi variabel ketika kita memiliki hal-hal seperti layanan dan pabrik.
jjperezaguinaga
74
Baiklah, Angular FAQ mengatakan ini di bagian bawah halaman: "Sebaliknya, jangan membuat layanan yang tujuan hidupnya hanya untuk menyimpan dan mengembalikan bit data." Lihat: docs.angularjs.org/misc/faq
Oytun
11
Ini adalah contoh sederhana. Saya percaya bahwa mereka mengatakan tidak memiliki layanan yang muncul hanya dalam satu kontroler. Saya tidak dapat menghitung berapa banyak tempat yang dikembangkan staf Angular secara khusus mengatakan bahwa layanan adalah cara resmi untuk mengirimkan data antara pengontrol. Lihatlah di sekitar milis, tanyakan berbagai tokoh-tokoh sudut, dan lihat apa yang Anda dapatkan. Saya mungkin juga mencatat bahwa kutipan Anda ada di bagian bawah bagian yang berjudul "$ rootScope ada, tetapi dapat digunakan untuk kejahatan." Mengirim data dari satu pengontrol ke pengontrol lainnya adalah kejahatan.
MBielski
1
Tetapi jika Anda perlu mengulang item Anda dalam dua tampilan / pengontrol yang berbeda, Anda harus menyalin data pertama di pengontrol untuk memberikannya ke tampilan? (Saya percaya ini adalah $ rootScope diselesaikan)
Thomas Decaux
1
Terserah pengembang untuk menggunakan penilaian, apakah layanan harus digunakan atau perbaikan cepat rootScope, untuk beberapa hal lingkup global adalah fasilitas dan yang berguna - dan saya pikir itulah yang coba dikatakan oleh dokumen Angular. Mari kita teruskan seni dalam pemrograman dan tidak menjadi robot untuk MVC bla bla sepenuhnya. Anda dapat menggunakan layanan di atas dan $ menonton variabel jika Anda memerlukan satu kontroler untuk mengetahui tentang perubahan namun karena berdiri di sini itu tidak benar-benar komunikasi antara pengontrol.
mendarat
21
angular.module('myApp').controller('myCtrl', function($scope, $rootScope) {
   var a = //something in the scope
   //put it in the root scope
    $rootScope.test = "TEST";
 });

angular.module('myApp').controller('myCtrl2', function($scope, $rootScope) {
   var b = //get var a from root scope somehow
   //use var b

   $scope.value = $rootScope.test;
   alert($scope.value);

 //    var b = $rootScope.test;
 //  alert(b);
 });

DEMO

Nitish Kumar
sumber
Jadi di Angular Anda biasanya tidak menggunakan var?
trysis
1
itu tergantung pada kondisi. jika ingin ditampilkan dalam html maka Anda harus menggunakan sebaliknya Anda dapat menggunakan var
Nitish Kumar
Oh ruang lingkup untuk hal-hal DOM?
trysis
1
Ini mungkin terlambat tetapi untuk pendatang terlambat, ruang lingkup adalah perekat antara tampilan dan pengontrol per dokumentasi AJS. ruang lingkup tidak secara langsung merujuk DOM. lalu apa fungsinya? di sini adalah dokumen docs.angularjs.org/guide/scope
yantaq
9

saya tidak menemukan alasan untuk melakukan ini $ scope.value = $ rootScope.test;

$ scope sudah prototipe inheritance dari $ rootScope.

Silakan lihat contoh ini

var app = angular.module('app',[]).run(function($rootScope){
$rootScope.userName = "Rezaul Hasan";
});

sekarang Anda dapat mengikat variabel cakupan ini di mana saja di tag aplikasi.

roconmachine
sumber
6

pertama-tama simpan nilai dalam $ rootScope sebagai

.run(function($rootScope){
$rootScope.myData = {name : "nikhil"}
})

.controller('myCtrl', function($scope) {
var a ="Nikhilesh";
$scope.myData.name = a;
});

.controller('myCtrl2', function($scope) {
var b = $scope.myData.name;
)}

$ rootScope adalah induk dari semua $ lingkup, setiap $ lingkup menerima salinan data $ rootScope yang dapat Anda akses menggunakan $ lingkup itu sendiri.

Nikhilesh Yadav
sumber
3

Jika itu hanya "akses di pengontrol lain" maka Anda dapat menggunakan konstanta sudut untuk itu, manfaatnya adalah; Anda dapat menambahkan beberapa pengaturan global atau hal lain yang ingin Anda akses di seluruh aplikasi

app.constant(‘appGlobals’, {
    defaultTemplatePath: '/assets/html/template/',
    appName: 'My Awesome App'
});

dan kemudian mengaksesnya seperti:

app.controller(‘SomeController’, [‘appGlobals’, function SomeController(config) {
    console.log(appGlobals);
    console.log(‘default path’, appGlobals.defaultTemplatePath);
}]);

(tidak menguji)

info lebih lanjut: http://ilikekillnerds.com/2014/11/constants-values-global-variables-in-angularjs-the-right-way/

Raza Ahmed
sumber
1

Ada beberapa cara untuk mencapai yang ini: -

1. Tambahkan $rootScopedi .runmetode

.run(function ($rootScope) {
    $rootScope.name = "Peter";
});

// Controller
.controller('myController', function ($scope,$rootScope) {
    console.log("Name in rootscope ",$rootScope.name);
    OR
    console.log("Name in scope ",$scope.name);
});

2. Buat satu layanan dan akses di kedua pengontrol.

.factory('myFactory', function () {
     var object = {};

     object.users = ['John', 'James', 'Jake']; 

     return object;
})
// Controller A

.controller('ControllerA', function (myFactory) {
    console.log("In controller A ", myFactory);
})

// Controller B

.controller('ControllerB', function (myFactory) {
    console.log("In controller B ", myFactory);
})
ojus kulkarni
sumber