How to update data in AngularJS Controllers using $hhtp.get() for the second time without reloading the page

Question

I have a view as follows (shortened for brevity):

<ul class="nav nav-tabs nav-stacked">
    <li ng-repeat="i in range">
        <a id="list{{i}}" ng-click="ShowList(i)">
            List Item {{i}}
        </a>
    </li>
</ul>

<ng-switch on="listItemType">
    <div ng-switch-when="1">
        <form-a></form-a>
    </div>
    <div ng-switch-when="2">
        <form-b></form-b>
    </div>
    <div ng-switch-when="3">
        <form-c></form-c>
    </div>
</ng-switch>

<form-a>, <form-b>, <form-c> are angular directives that load a templateUrl and have Controllers of their own.

The controller of the above view is:

var listCount;
var listIds = [];
$http.get('/api/lists').
    success(function(data) {
        $scope.lists = data.lists;

        for (listCount = 1; listCount <= $scope.lists.length; listCount++) {
            listIds.push(listCount);
        }

        $scope.range = listIds;
    });
$scope.ShowList = function(listNumber) {
    $scope.listItemType = $scope.lists[listNumber - 1].listType;
};

As can be seen, this controller fetches some data using $http.get().
Now, the controller for <form-a> posts some data. This updates the same data that the above controller had fetched. In other words, I need a new entry in the <li> tags at the beginning of the view.

However, the controller for the page has already done a $http.get() request. How do I ask it to get the data again so that the lists information in the first controller gets updated? In other words, on the event that the data has changed, is there an event handler in the first controller that I could use to $http.get() the data again?
Since the page is not refreshed or reloaded, the controller, with my above code calls the $http.get() only once and if the controller of the directives in the same page updates the data, there is no way for the first controller to update its data.

I'm not totally sure what you're asking, but can you $broadcast/$emit your own events from the directives and catch them in the page controller? — James M
– James M, Commented Feb 27, 2013 at 20:04

Ben Lesh · Accepted Answer · 2013-02-27 20:01:19Z

2

You would just wrap that $get call in a function and call it again.

We'll probably need to see more of what you have going... but consider this:

function ParentCtrl($scope, $http) {
   $scope.foo = [];

   $scope.loadFoo = function () {
       $http.get('/foo/data')
            .success(function(data) {
               $scope.foo = data;
            });
   };

   $scope.loadFoo();
}

function ChildCtrl($scope) {
   $scope.loadFoo(); //still here from Parent scope.
}

But again, you really didn't give enough information to answer your question, because since you're using directives, if you isolated the scope, you'll have to pass a reference to your loadFoo() method:

app.directive('testDir', function (){
   return {
     restrict: 'E',
     scope: {
       'loadFoo': '&'
     },
     link: function(scope) {
       scope.loadFoo();
     }
   }
});

To be used as:

<test-dir load-foo="loadFoo()"></test-dir>

edited Feb 27, 2013 at 20:01

answered Feb 27, 2013 at 19:54

Ben Lesh

109k47 gold badges251 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

callmekatootie Over a year ago

The first code suggestion did the trick. I did not realize that the scope of ParentCtrl is already available in the ChildCtrl. This worked like a charm. Many Thanks!

Ben Lesh Over a year ago

Yes, the child scopes prototypically inherit from the parent. So if you alter a value even in the parent scope, it alters it in the child (but not the other way around)

Collectives™ on Stack Overflow

How to update data in AngularJS Controllers using $hhtp.get() for the second time without reloading the page

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related