Değişkenleri depolamak için Angular'da $ rootScope'u nasıl kullanabilirim?


217

$rootScopeDaha sonra başka bir denetleyicide erişmek istediğim bir denetleyicide değişkenleri depolamak için nasıl kullanabilirim ? Örneğin:

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

Bunu nasıl yaparım?


1
$ rootScope'u kontrolöre enjekte etmeli ve basit bir javascript olarak kullanmalısınız
Ajay Beniwal 18:13

30
$ rootScope bunu yapmanın doğru yolu değildir. Değişkenleri birden fazla denetleyicide kullanılabilir hale getirmek, hizmetlerin ne için olduğunu hemen hemen gösterir.
Steve

11
@Steve: Angular SSS "hayattaki tek amacı veri bitlerini saklamak ve geri vermek olan bir hizmet oluşturmayın" diyor Bu, $ digest döngüsüne çok fazla yük koyacaktır ..
Marwen Trabelsi

Denetleyicileri hizmetlere enjekte edemezsem, söz konusu hizmetinizden diğer denetleyicime nasıl bir değişken gönderirim? Ben bu işe almak için bir yol göremiyorum ... burada içgörü takdir ..
indi

2
iyi, çünkü enjekte edilemez, bunun için bir şırıngaya ihtiyacınız olacak ..
Xsmael

Yanıtlar:


248

Kök kapsamda ayarlanan değişkenler denetleyici kapsamı için prototip miras yoluyla kullanılabilir.

İşte @ Nitish'in demo ilişkisini biraz daha açık gösteren değiştirilmiş bir versiyonu: http://jsfiddle.net/TmPk5/6/

Modül başlatıldığında rootScope değişkeninin ayarlandığına ve devralınan kapsamın her birinin bağımsız olarak ayarlanabilecek kendi kopyasına sahip olduğuna dikkat edin ( changeişlev). Ayrıca, rootScope'un değeri de güncellenebilir ( changeRsişlev 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;
    };
});

7
Artı 1 ... ah ... aslında OP'nin sorusunu cevaplıyor. (@MBielski ve diğerleri haklı olsa da).
Rap

Bunu yaparsam $scope.test = 'Some value', $rootScope.testdeğişiklik de olur mu?
Allen Linatoc

@AllenLinatoc hayır, kapsamı $rootScope küresel olmasına rağmen (tüm denetleyicilerin üzerinde) iki farklı nesne olmayacak, ancak denetleyicide $scopeyerel kalmaya devam edecektir. Eğer kullanırsanız $scope.testiki farklı kontrolörleri de bunlar olmadığını iki farklı değişken olduğunu biliyorum $rootScope.test aynı değişken tüm kontrolörler olacağını
Xsmael

Global root değişkenlerini diğer dillerde kullanmak istemediğiniz için $ rootScope'u sık sık kullanmak istemediğinizi varsayıyorum?
Zypps987

Bir uygulamada kaç tane kök değişken oluşturabiliriz?
Jay

161

Kontrolörler arasında veri paylaşımı Fabrikalar / Servisler için çok iyidir. Kısacası, böyle bir şey çalışır.

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

Bu kemanda çalışan bir örnek görebilirsiniz: http://jsfiddle.net/mbielski/m8saa/


49
+1 $rootScopeHizmetler ve fabrikalar gibi şeyler olduğunda değişkenleri paylaşmak için kullanılmamalıdır.
jjperezaguinaga

74
Açısal SSS bunu sayfanın altında söylüyor: "Tersine, hayattaki tek amacı veri bitlerini saklamak ve geri vermek olan bir hizmet oluşturmayın." Bakınız: docs.angularjs.org/misc/faq
Oytun

11
Bu basit bir örnek. Sadece bir denetleyicide görünen bir hizmete sahip olmamalarını söylediklerine inanıyorum. Angular'ı geliştiren personelin kaç yer olduğunu, hizmetlerin denetleyiciler arasında veri aktarmanın resmi yolu olduğunu özellikle söyleyemem. Posta listesine bakın, çeşitli Açısal armatürlere sorun ve ne elde ettiğinizi görün. Ayrıca, teklifinizin "$ rootScope var, ancak kötülük için kullanılabilir" başlıklı bölümün altında olduğunu da belirtebilirim. Bir denetleyiciden diğerine veri aktarmak kötüdür.
MBielski

1
Ancak, öğelerinizi iki farklı görünümde / denetleyicide döngüye almanız gerekiyorsa, görünümü vermek için önce denetleyicide verileri kopyalamanız gerekir mi? (Bunun $ rootScope'un çözüldüğüne inanıyorum)
Thomas Decaux

1
Bir hizmetin kullanılması veya rootScope'un hızlı bir şekilde düzeltilip düzeltilmeyeceği konusunda yargıyı kullanmak geliştiriciye bağlıdır, bazı şeyler için küresel kapsam bir tesis ve kullanışlı bir konudur ve bence Açısal belgelerin söylemeye çalıştığı şey budur. Sanatı programlamada tutalım ve MVC falan filan filan için robot haline gelmeyelim. Değişiklik hakkında bilmek için bir denetleyiciye ihtiyacınız varsa yukarıdaki hizmeti kullanabilir ve $ watch değişkenini kullanabilirsiniz, ancak burada durduğu için denetleyiciler arasındaki iletişim gerçekten değildir.
indi

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


Yani Angular'da genellikle var?
trysis

1
bu duruma bağlıdır. html içinde göstermek istiyorsanız u kullanmak gerekir aksi takdirde u kullanabilirsiniz var
Nitish Kumar

Oh kapsam DOM şeyler için mi?
trysis

1
Bu geç olabilir, ancak herhangi bir geç gelen için, kapsam AJS belgelerine göre görünüm ve denetleyici arasında bir yapıştırıcıdır. kapsam doğrudan DOM'ye başvurmaz. o zaman ne yapar? burada daha ayrıntılı docs docs.angularjs.org/guide/scope
yantaq

9

Bunu yapmak için hiçbir neden bulamıyorum $ scope.value = $ rootScope.test;

$ scope, $ rootScope'tan zaten prototip mirasıdır.

Lütfen bu örneğe bakın

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

artık bu kapsam değişkenini uygulama etiketinin herhangi bir yerine bağlayabilirsiniz.


6

ilk önce değerleri $ rootScope içinde

.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, tüm $ kapsamının üst öğesidir, her $ kapsamı, $ scope'un kendisini kullanarak erişebileceğiniz $ rootScope verilerinin bir kopyasını alır.


3

Eğer sadece "diğer kontrolörden erişim" ise, bunun için açısal sabitleri kullanabilirsiniz. uygulama genelinde erişmek istediğiniz bazı genel ayarlar veya başka şeyler ekleyebilirsiniz

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

ve daha sonra şu şekilde erişin:

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

(test etmedi)

daha fazla bilgi: http://ilikekillnerds.com/2014/11/constants-values-global-variables-in-angularjs-the-right-way/



1

Bunu başarmanın birden fazla yolu vardır: -

1. ekleyin $rootScopeiçinde .runyöntemle

.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. Bir hizmet oluşturun ve her iki denetleyicide de ona erişin.

.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);
})
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.