2014-10-30 29 views
42

denetleyicilerini tanımlamanın asıl yolu ile, ana kapsamın erişiminin önemsiz olması nedeniyle, çocuk kapsamı prototip olarak üst öğesinden devraldığı için.Devralınan kapsamı denetleyiciye erişim Yaklaşım

app.controller("parentCtrl", function($scope){ 
    $scope.name = "Parent"; 
}) 
.controller("childCtrl", function($scope){ 
    $scope.childName = "child of " + $scope.name; 
}); 

<div ng-controller="parentCtrl"> 
    {{name}} 
    <div ng-controller="childCtrl"> 
     {{childName}} 
    </div> 
</div> 

Kontrolör-As yaklaşım bir denetleyici bildirmek için recommended yol olarak görünmektedir. Ancak Controller-As ile, yukarıdaki yaklaşım artık çalışmaz. Bu (spagetti kod potansiyeli) ile bazı sorunları var

<div ng-controller="parentCtrl as pc"> 
    {{pc.name}} 
    <div ng-controller="childCtrl as cc"> 
     {{cc.childName}} 
    </div> 
</div> 

, ancak bu soru gelen ana kapsamını erişen hakkındadır:

Tabii, adlı pc.name ile ebeveyn kapsamını erişebilir çocuk denetleyicisi. Bu çalışma görebilirsiniz

tek yoludur:

app.controller("parentCtrl", function(){ 
    this.name = "parent"; 
}) 
.controller("childCtrl", function($scope){ 
    $scope.pc.name = "child of " + $scope.name; 
    // or 
    $scope.$parent.pc.name = "child of " + $scope.name; 

    // there's no $scope.name 
    // and no $scope.$parent.name 
}); 

Şimdi, çocuk kontrolör " pc" hakkında bilmek gerekiyor - bu (my mind) görünümüne sınırlandırılması gerektiğini hariç. Bir çocuğun kontrolör bir görünümü bir ng-controller="parentCtrl as pc" ilan etmeye karar verdi gerçeği hakkında bilmek gerektiğini düşünüyorum.

S: doğru yaklaşım daha sonra ne var?

DÜZENLEME:

Açıklama: Ben bir üst denetleyicisi miras aramıyorum. Paylaşılan kapsamı miras almaya/değiştirmeye çalışıyorum.

app.controller("parentCtrl", function($scope){ 
    $scope.someObj = {prop: "not set"}; 
}) 
.controller("childCtrl", function($scope){ 
    $scope.someObj.prop = "changed"; 
}); 
+1

Angular'ın "denetleyicileri" gerçekten bir "yardımcı yardımcı" ya da "görünüm modelidir". 'ControllerAs' kullanılmasını öneren stil kılavuzları, 'pc' yi doğrudan ya da bu durumla ilgili olarak kullanmanıza teşvik eder. "ParentCtrl" ve "childCtrl" arasında bir miras zinciri kurabileceğinizi varsayalım. childCtrl.prototype = Object.create (parentCtrl.prototype) 've daha sonra' childCtrl 'yapıcınızdaki 'this.name', onu gölgelemeden önce ebeveynin adına başvurur. – Sacho

cevap

60

araştırma sonra aşağıdaki gerçekleşme geldi:

Kontrolör-As yaklaşımı $scope kullanarak yerini DEĞİLDİR. Hem onların yeri vardır, ve/mantıklı bir arada kullanılabilir ve kullanılmalıdır.

  1. $scope Adından da anlaşılacağı tam olarak ne yapar: $scope üzerine ViewModel özellikleri tanımlar yani. Bu kendi mantığı sürücü $scope kullanabilir veya değiştirmek için iç içe kontrolörleri ile kapsamını paylaşmak için en iyi çalışır.
  2. Denetleyici-de (kontrolörün takma yoluyla) adlandırılmış bir kapsamı ile ViewModel olarak tüm kontrol nesnesi tanımlar.Görünüm, yalnızca belirli bir denetleyici ViewModel'e başvurmak isteyip istemediğine karar verirse, yalnızca Görünüm'de (ancak diğer denetleyiciler değil) çalışır. İşte

bir örnek: basitçe programlı ana kapsamını erişmek isteyen herkes, $scope servisini kullanmak ebeveyn kapsamını bulmak ve kullanılan ad erişmek için

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

 
// Then the controllers could choose whether they want to modify the inherited scope or not: 
 
app.controller("ParentCtrl", function($scope) { 
 
    this.prop1 = { 
 
     v: "prop1 from ParentCtrl" 
 
    }; 
 
    $scope.prop1 = { 
 
     v: "defined on the scope by ParentCtrl" 
 
    }; 
 
    }) 
 
    .controller("Child1Ctrl", function($scope) {}) 
 
    .controller("Child2Ctrl", function($scope) { 
 
    // here, I don't know about the "pc" alias 
 
    this.myProp = $scope.prop1.v + ", and changed by Child2Ctrl"; 
 
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script> 
 

 
<body ng-app="myApp"> 
 
    <div ng-controller="ParentCtrl as pc"> 
 
    <div ng-controller="Child1Ctrl"> 
 
     <div>I know about the "pc" alias: {{pc.prop1.v}}</div> 
 
    </div> 
 
    <div ng-controller="Child2Ctrl as ch2"> 
 
     <div>I only care about my own ViewModel: {{ch2.myProp}}</div> 
 
    </div> 
 
    </div>

+2

Yani temelde bir çocuğun içindeki bir ebeveynin kapsamına erişmenin mümkün olmadığını söylüyorsunuz "denetleyici" kullanarak? OP ($ scope. $ Parent.pc.name) tarafından listelenen yaklaşımın uygulanabilir olduğunu düşünmüyorum. – d512

7

Sen yapmalıyım gibi:

html

<div ng-controller="ChildController as child"> 
    <button type="button" ng-click="child.sayMe()">Say me!</button> 
</div> 

js

Ben ilk örneğini değiştirme olsaydı yani, ben aşağıdakileri yapmak gerekir
var app = angular.module('myApp', []) 
app.controller('BaseController',function() { 
    this.me = 'Base'; 
    this.sayMe= function() { 
     alert(this.me); 
    } 
}); 
app.controller('ChildController', function($scope, $controller) { 
    var controller = $controller('BaseController as base', {$scope: $scope}); 
    angular.extend(this, controller); 
    this.me = 'Child'; 
}); 

bir göz at almak https://docs.angularjs.org/guide/controller

+0

Amacım (eğer düzgün bir şekilde iletilmediyse özür dilerim) bir temel denetçiyi miras almak değil, kapsamı miras almaktı. Hangi ana denetleyicinin olduğunu bilmek istemiyorum - sadece kapsamıma güvenmek istiyorum (ilk örneğime göre). –

+0

tamam, bildiğim tek yol $ parent kullanıyor. $ Scope veya $ rootScope – Whisher

+0

@Whisher: gerçekten yardımcı oldu. Bununla ilgili bir soru. 'BaseController' ü üs olarak koyma ihtiyacı nedir? Her neyse, basitçe 'BaseController' yapabilirim, amaç mülkleri/yöntemleri miras almaktır. Eğer yanlışı varsa lütfen beni düzeltin – jintoppy

1

ana kapsamın controllerAs, örneğin:

İlgili konular