How to nest angularjs controllers and directives?

Question

If I nest my controllers like this:

<body ng-app="app" ng-controller="ctrl">

    <div ng-controller="app-get">
        <app-get></app-get>
    </div>
    <div ng-controller="app-post">
        <app-post"></app-post>
    </div>
    <div ng-controller="app-update">
        <app-update></app-update>
    </div>

</body>

Why is application only capable of interpreting only the first controller (app-get), while other two are unable to load correctly?

Answer 1

You have a typo in your markup, but I am not sure if it's the issue, because you did not share any other code:

<div ng-controller="app-post">
    <app-post"></app-post>
              \
               what's that double quote doing here?
</div>

Anyway, here is a simple snippet I wrote to demonstrate how one can achieve the layout you're trying to implement:

 angular.module('app', []) .controller('AppController', AppController) .controller('AppGetController', AppGetController) .controller('AppPostController', AppPostController) .controller('AppUpdateController', AppUpdateController) .directive('appGet', appGetDirective) .directive('appPost', appPostDirective) .directive('appUpdate', appUpdateDirective); function AppController() { this.hello = 'Hello from AppController!'; } function AppGetController() { this.hello = 'Hello from AppGetController!'; } function AppPostController() { this.hello = 'Hello from AppPostController!'; } function AppUpdateController() { this.hello = 'Hello from AppUpdateController!'; } function appGetDirective() { return { template: '<h3>Hello from appGet directive!</h3>' }; } function appPostDirective() { return { template: '<h3>Hello from appPost directive!</h3>' }; } function appUpdateDirective() { return { template: '<h3>Hello from appUpdate directive!</h3>' }; }

 html, body { margin: 0; padding: 0; } body { background: #f3d250; padding: 10px; } h1, h2, h3 { margin: 0; padding: 10px; } h3 { background: #5da2d5; } div { background: #f78888; margin: 10px; padding: 0 10px 10px; }

 <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> </head> <body ng-app="app" ng-controller="AppController as app"> <h1>{{app.hello}}</h1> <div ng-controller="AppGetController as appGet"> <h2>{{appGet.hello}}</h2> <app-get></app-get> </div> <div ng-controller="AppPostController as appPost"> <h2>{{appPost.hello}}</h2> <app-post></app-post> </div> <div ng-controller="AppUpdateController as appUpdate"> <h2>{{appUpdate.hello}}</h2> <app-update></app-update> </div> </body> </html>

How to nest angularjs controllers and directives?

Question

1 answers

solution1
0 ACCPTED 2019-04-14 16:58:15

How to nest angularjs controllers and directives?

Question

1 answers

solution1 0 ACCPTED 2019-04-14 16:58:15

solution1
0 ACCPTED 2019-04-14 16:58:15