Is it possible to use Controllers hierarchically in the Angular JS?

Asked

Viewed 217 times

3

Controllers are declared in the DOM via the ng-controller attribute. My question is: It is possible and robust / safe to define Controllers hierarchically in DOM in daughter 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 on others (more Comprehensive).

javascript angularjs
  • 3

    Yes, it’s possible and safe.

3 answers

1

Yes, it is possible and commonly used.

A scenario would be for you to have a contact page with a controller Contactctrl and within this page you have a contact form with the controller Contactformctrl where you would do the validations and the like.

You could also use the Contactformctrl in another place, a contact form in the footer for example, depending on your application, of course.

I hope I’ve helped

0

Yes, it is possible (and desirable in various situations - for example in List/Detail content.) 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>

    <div ng-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>

0

I don’t know about the earlier versions but tested in version 1.2.19 Angular and ran smoothly.

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>
      var app = angular.module('ctrlhierarquicos', []);

      app.controller('subCCtrl', function($scope) {
        $scope.hideThisBox = false;
        $scope.update = function(label) {
          $scope.hideThisBox = (label == 'Hide');
          // alert($scope.hideThisBox);
        }
        $scope.cStuff = 'cStuff is here !';
      });
      app.controller('subACtrl', function($scope) {
        $scope.aStuff = 'aStuff is here !';
      });

      app.controller('subBCtrl', function($scope) {
        $scope.bStuff = 'bStuff is here !';
      });
    </script>
  </head>

  <body  ng-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>

Browser other questions tagged javascript angularjs

You are not signed in. Login or sign up in order to post.