Jak wywołać metodę zdefiniowaną w zakresie podrzędnym z zakresu nadrzędnego?
function ParentCntl() {
// I want to call the $scope.get here
}
function ChildCntl($scope) {
$scope.get = function() {
return "LOL";
}
}
Jak wywołać metodę zdefiniowaną w zakresie podrzędnym z zakresu nadrzędnego?
function ParentCntl() {
// I want to call the $scope.get here
}
function ChildCntl($scope) {
$scope.get = function() {
return "LOL";
}
}
Odpowiedzi:
Możesz używać $broadcast
od rodzica do dziecka:
function ParentCntl($scope) {
$scope.msg = "";
$scope.get = function(){
$scope.$broadcast ('someEvent');
return $scope.msg;
}
}
function ChildCntl($scope) {
$scope.$on('someEvent', function(e) {
$scope.$parent.msg = $scope.get();
});
$scope.get = function(){
return "LOL";
}
}
Skrzypce robocze: http://jsfiddle.net/wUPdW/2/
AKTUALIZACJA : Istnieje inna wersja, mniej sprzężona i bardziej testowalna:
function ParentCntl($scope) {
$scope.msg = "";
$scope.get = function(){
$scope.$broadcast ('someEvent');
return $scope.msg;
}
$scope.$on('pingBack', function(e,data) {
$scope.msg = data;
});
}
function ChildCntl($scope) {
$scope.$on('someEvent', function(e) {
$scope.$emit("pingBack", $scope.get());
});
$scope.get = function(){
return "LOL";
}
}
Skrzypce: http://jsfiddle.net/uypo360u/
$scope.$parent
lub in $scope.$parent.$parent
itd.)? Ach, tak: przekaż wywołanie zwrotne w parametrach! :)
$emit
od dziecka do rodzica. Myślę, że nadszedł czas, aby zaktualizować moją odpowiedź ...
$parent
)
$broadcast
i możesz pingBack
całkowicie wyeliminować .
Zasugeruję inne rozwiązanie:
var app = angular.module("myNoteApp", []);
app.controller("ParentCntl", function($scope) {
$scope.obj = {};
});
app.controller("ChildCntl", function($scope) {
$scope.obj.get = function() {
return "LOL";
};
});
Mniej kodu i korzystanie z dziedziczenia prototypowego.
$scope.obj.get()
będzie prawidłową funkcją.
Zarejestruj funkcję dziecka w rodzicu, gdy dziecko jest inicjowane. Użyłem notacji „jako” dla przejrzystości szablonu.
SZABLON
<div ng-controller="ParentCntl as p">
<div ng-controller="ChildCntl as c" ng-init="p.init(c.get)"></div>
</div>
KONTROLERY
...
function ParentCntl() {
var p = this;
p.init = function(fnToRegister) {
p.childGet = fnToRegister;
};
// call p.childGet when you want
}
function ChildCntl() {
var c = this;
c.get = function() {
return "LOL";
};
}
„Ale”, mówisz, „ ng-init
nie powinno być używane w ten sposób !”. Cóż, tak, ale
Mówię, że to dobry użytek. Jeśli chcesz mnie zlekceważyć, skomentuj z uzasadnieniem! :)
Podoba mi się to podejście, ponieważ sprawia, że komponenty są bardziej modułowe. Jedyne powiązania znajdują się w szablonie i to oznacza
To podejście jest bliższe idei Tero, polegającej na modularyzacji za pomocą dyrektyw (zauważ, że w jego zmodularyzowanym przykładzie contestants
jest przekazywana z dyrektywy rodzica do dyrektywy „dziecka” W SZABLONIE).
W istocie innym rozwiązaniem mogłoby być rozważenie implementacji ChildCntl
dyrektywy w formie dyrektywy i wykorzystanie &
powiązania do zarejestrowania init
metody.
Możesz zrobić obiekt potomny.
var app = angular.module("myApp", []);
app.controller("ParentCntl", function($scope) {
$scope.child= {};
$scope.get = function(){
return $scope.child.get(); // you can call it. it will return 'LOL'
}
// or you can call it directly like $scope.child.get() once it loaded.
});
app.controller("ChildCntl", function($scope) {
$scope.obj.get = function() {
return "LOL";
};
});
Tutaj dziecko udowadnia przeznaczenie metody get.