AngularJS - Alt kapsama erişim

Aşağıdaki denetleyicilerim varsa:

function parent($scope, service) {
    $scope.a = 'foo';

    $scope.save = function() {
        service.save({
            a:  $scope.a,
            b:  $scope.b
        });
    }
}

function child($scope) {
    $scope.b = 'bar';
}

İzin uygun yolu nedir parentokumak bdışında child? O tanımlamak gerekli ise bde parent, bu anlam yanlış olduğunu varsayarak yapmak olmaz bilgili bir şey açıklayan bir özelliktir childdeğil parent?

Güncelleme: birden fazla çocuk olsaydı, bu konuda daha fazla düşünmek bonun için çakışma oluşturacak parenthangi balmak için. Benim sorum kalıntıları, erişime uygun yolu nedir bdan parent?

AngularJS'deki kapsamlar prototip kalıtımı kullanır, bir çocuk kapsamındaki bir özelliği ararken, yorumlayıcı prototip zincirini çocuktan başlayarak arar ve mülkü bulana kadar ebeveynlere devam eder, tersi değil.

Vojta'nın konuyla ilgili yorumlarını kontrol edin https://groups.google.com/d/msg/angular/LDNz_TQQiNE/ygYrSvdI0A0J

Özetle: Alt kapsamlara bir üst kapsamdan erişemezsiniz.

Çözümleriniz:

1. Ebeveynlerdeki özellikleri tanımlayın ve bunlara çocuklardan erişin (yukarıdaki bağlantıyı okuyun)
2. Durumu paylaşmak için bir hizmet kullanın
3. Verileri etkinliklerden geçirin. $emitkök kapsamı kadar olayları üst öğelere gönderir ve $broadcastolayları aşağı doğru gönderir. Bu, şeyleri anlamsal olarak doğru tutmanıza yardımcı olabilir.

Jm-'nin cevabı bu durumu ele almanın en iyi yolu olsa da, ileride başvurmak için kapsamın $$ childHead, $$ childTail, $$ nextSibling ve $$ prevSibling üyelerini kullanarak alt kapsamlara erişmek mümkündür. Bunlar belgelenmediğinden önceden haber verilmeksizin değiştirilebilir, ancak kapsamları gerçekten geçmeniz gerekiyorsa oradalar .

// get $$childHead first and then iterate that scope's $$nextSiblings
for(var cs = scope.$$childHead; cs; cs = cs.$$nextSibling) {
    // cs is child scope
}

Vaktini boşa harcamak

Bunu deneyebilirsiniz:

$scope.child = {} //declare it in parent controller (scope)

sonra alt denetleyicide (kapsam) ekleyin:

var parentScope = $scope.$parent;
parentScope.child = $scope;

Artık ebeveyn, çocuğun kapsamına erişebilir.

Olası bir geçici çözüm, bir init işlevi kullanarak üst denetleyiciye alt denetleyiciyi enjekte etmektir.

Olası uygulama:

<div ng-controller="ParentController as parentCtrl">
   ...

    <div ng-controller="ChildController as childCtrl" 
         ng-init="ChildCtrl.init()">
       ...
    </div>
</div>

Nerede ChildControllersahipsin:

app.controller('ChildController',
    ['$scope', '$rootScope', function ($scope, $rootScope) {
    this.init = function() {
         $scope.parentCtrl.childCtrl = $scope.childCtrl;
         $scope.childCtrl.test = 'aaaa';
    };

}])

Yani şimdi ParentControllerkullanabilirsiniz:

app.controller('ParentController',
    ['$scope', '$rootScope', 'service', function ($scope, $rootScope, service) {

    this.save = function() {
        service.save({
            a:  $scope.parentCtrl.ChildCtrl.test
        });
     };

}])

Önemli:
Düzgün çalışması için yönergeyi kullanmanız ve html'de yaptığım gibi ng-controllerher bir denetleyiciyi yeniden adlandırmanız gerekir as.

İpuçları: İşlem sırasında
krom eklenti denetçisini kullanın . Ağacı anlamanıza yardımcı olacak.

$ Emit ve $ yayın kullanarak (yukarıdaki yorumlarda walv tarafından belirtildiği gibi)

Bir olayı yukarı doğru tetiklemek için (çocuktan ebeveyne)

$scope.$emit('myTestEvent', 'Data to send');

Bir olayı aşağı doğru tetiklemek için (ebeveynden çocuğa)

$scope.$broadcast('myTestEvent', {
  someProp: 'Sending you some data'
});

ve sonunda dinlemek

$scope.$on('myTestEvent', function (event, data) {
  console.log(data);
});

Daha fazla ayrıntı için: - https://toddmotto.com/all-about-angulars-emit-broadcast-on-publish-subscribing/

Zevk almak :)

Evet, alt denetleyicideki değişkenleri üst denetleyicideki değişkenlere atayabiliriz. Bu olası bir yoldur:

Genel Bakış: Aşağıdaki kodun ana amacı, alt denetleyicinin $ kapsam. Değişkenini üst denetleyicinin $ kapsamına atamaktır.

Açıklama: İki denetleyici vardır. Html'de, üst denetleyicinin alt denetleyiciyi içerdiğine dikkat edin. Bu, üst denetleyicinin alt denetleyiciden önce yürütüleceği anlamına gelir. Bu nedenle, önce setValue () tanımlanacak ve ardından kontrol alt denetleyiciye gidecek. $ kapsam.variable "alt" olarak atanacak. Daha sonra bu alt kapsam, üst denetleyicinin işlevine bir argüman olarak aktarılır, burada $ kapsam.assign, değeri "alt" olarak alacaktır.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module('myApp',[]);

    app.controller('child',function($scope){
        $scope.variable = "child";
        $scope.$parent.setValue($scope);
    });

    app.controller('parent',function($scope){
        $scope.setValue = function(childscope) {
            $scope.assign = childscope.variable;
        }
    });

</script>
<body ng-app="myApp">
 <div ng-controller="parent">
    <p>this is parent: {{assign}}</p>
    <div ng-controller="child">
        <p>this is {{variable}}</p>
    </div>
 </div>
</body>
</html>