Controllers are declared in the DOM via the ng-controller attribute. My question is: Is it possible and robust / secure to define controllers hierarchically in the DOM in child tags?
Example:
<div ng-controller="CtrlAbrangente">
<div ng-controller="CtrlNoDIVFilhoDeAbrangente">
Fazer algo que usa o escopo do CtrlAbrangente e/ou do CtrlNoDIVFilhoDeAbrangente.
</div>
</div>
I see this need in cases where functionality on one page can be reused in others (more Comprehensive).
Yes, it is possible and commonly used.
A scenario would be for you to have a contact page with a ContactCtrl controller and within this page you have a contact form with the ContactFormCtrl where you would do the validations and the like.
You could also use ContactFormCtrl elsewhere, a contact form in the footer for example, depending on your application of course.
I hope I have helped
I do not know how much previous versions but tested in version 1.2.19 of Angular and worked without problems.
See code below:
<!DOCTYPE html>
<html ng-app="ctrlhierarquicos">
<head>
<meta charset="utf-8" />
<title>AngularJS Dois Controladores Posicionados Hierárquicamente</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script><script>varapp=angular.module('ctrlhierarquicos',[]);app.controller('subCCtrl',function($scope){$scope.hideThisBox=false;$scope.update=function(label){$scope.hideThisBox=(label=='Hide');//alert($scope.hideThisBox);}$scope.cStuff='cStuffishere!';});app.controller('subACtrl',function($scope){$scope.aStuff='aStuffishere!';});app.controller('subBCtrl',function($scope){$scope.bStuff='bStuffishere!';});</script></head><bodyng-controller="subCCtrl">
<div>
<div class="row">
<div class="span6">
<a href="#" ng-click='update("Show")'>Show</a>
<br />
<a href="#" ng-click='update("Hide")'>Hide</a>
<br />
</div>
</div>
<hr />
<div ng-controller="subACtrl">
Do stuff that uses subACtrl or subCCtrl<br />
{{ aStuff }}<br />
{{ myEchoData}}<br />
{{ cStuff }}
</div>
<div ng-controller="subBCtrl">
Do stuff that uses subBCtrl or subCCtrl<br />
{{ bStuff }}<br />
{{ myEchoData}}<br />
{{ cStuff }}
</div>
<hr />
<br />
<div class="row-fluid">
<div class="span3">
<label>If click on 'Hide', to hide below box: </label>
</div>
<div ng-hide="hideThisBox" class="span6">
<input type="text" ng-model="myEchoData"/>
</div>
</div>
</div>
</body>
</html>
Yes, it is possible (and desirable in a number of situations - for example, in List / Detail contents.) In the following code you can check that the content of $scope is shared hierarchically:
var app = angular.module('app', []);
app.controller('primeiroController', function($scope) {
$scope.ValorPai = 0;
$scope.funcaoPai = function() {
alert('função Pai');
};
});
app.controller('segundoController', function($scope) {
$scope.ValorFilho = 0;
}); <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="app">
<div ng-controller="primeiroController">
<strong>Controle Pai</strong><br />
valorPai:
<input type="text" ng-model="valorPai">
<br />
<br />
<div ng-controller="segundoController">
<strong>Controle Filho</strong><br />
valorPai:
<input type="text" ng-model="valorPai"><br />
valorFilho:
<input type="text" ng-model="valorFilho"><br />
<br />
Chamar função no Pai a partir do Filho<br />
<button ng-click='funcaoPai()'>Chamar</button>
</div>
</div>
</div>