AngularJS: how deals with multiple http request on same page using different controllers

Question

I am using two controller on same page to get two different results from server using http request in Angularjs, but getting results from only first request code example is below

<div ng-app="na_details">
    <div ng-controller="na_details_ctrl">

            <tbody>
                <tr ng-repeat="x in na_seats">
                <td>{{ $index+1}}</td>
                    <td>{{ x.name }}</td>
                    <td>{{ x.party }}</td>
                    <td>{{ x.votes }}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div name="div" class="section-row">
        <div class="section-title">
            <h2 class="title">Other Related National Assemblies Results </h2>
        </div>
        <div ng-controller="related_ctrl">
            <tr ng-repeat="seat in related_seats">
                    <td>{{seat.name}}</td>

            </tr>  
        </div>   

    </div>

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

app.controller('na_details_ctrl', function($scope, $http) {
    $http.get("get-na-details.php",
    {params:{"seat_id": <?php echo $seat_id;?>}}
    )
    .then(function (response) {
        $scope.na_seats = response.data;
    });
});

app.controller('related_ctrl', function($scope, $http) {
    $http.get("get-related-na-details.php",
    {params:{"seat_id": <?php echo $seat_id;?>}}
    )
    .then(function (response) {
        $scope.related_seats = response.related_data;
    });
});

georgeawg · Accepted Answer · 2020-03-07 19:59:55Z

ERRONEOUS

<div ng-controller="related_ctrl">
    <tr ng-repeat="seat in related_seats">                
        <td>{{seat.name}}</td>
    </tr>  
</div>

When the HTML5 parser sees illegal <tr> and <td> tags, it ignores them. The AngularJS compiler will not see the ng-repeat directive because the <tr> element is not added to the DOM.

BETTER

<table ng-controller="related_ctrl">
    <tr ng-repeat="seat in related_seats">                
        <td>{{seat.name}}</td>
    </tr>  
</table>

In this case the HTML5 parser will automatically add a <tbody> element to the <table> and add <tr> elements to that <tbody>. The ng-repeat directive will be added to the DOM and the AngularJS compiler will act on it.

Care should be taken that the HTML follows the rules for <table> elements.

For more information, see

MDN HTML Element Reference — Table

Collectives™ on Stack Overflow

AngularJS: how deals with multiple http request on same page using different controllers

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related