0

I have used a controller in angularjs in the same page in two different divs:

One div is a filter like thing:

<div class="upload_date mar_btm" ng-controller="recentuploadsController">
                    <ul>
                    <li><a onclick="filterTopSearch(1)">Today</a></li>
                    <li><a href="javascript:void(0);" ng-click="getTimely(7)">Last 7 Days</a></li>
                    <li><a href="javascript:void(0);" ng-click="getTimely(30)">Last 30 Days</a></li>
                    <li><a href="javascript:void(0);" ng-click="getTimely(365)">Last 12 Months</a></li>
                    <li><a href="javascript:void(0);" ng-click="getTimely(0)">All Time</a></li>
                    </ul>           
</div>

Other one is the actual dive where it should update :

<div class="recent_uploads mar_btm" ng-controller="recentuploadsController">
                        <div class="mar_btm titl_img"><h6>Recent Uploads</h6><!--<img alt="recent uploads" src="<?php echo base_url(); ?>public/image/net03.png">--></div>
                        <input type="text" ng-model="search.text" class="community-searching hide">
                        <button ng-click="clearSearch()" class="hide">clear</button>
                        <div class="rec_uplist_cont">
                            <div class="rec_uplist_slider">                         
                            <div class="flex-viewport" style="overflow: hidden; position: relative;">
                                <ul class="slides" style="width: 800%; transition-duration: 0.6s; transform: translate3d(-240px, 0px, 0px);">
                                        <div class="recnt_info" ng-if="recentupload!=null"><p> No Data Found</p></div>

                                        <li id="apptest" style="width: 226px; float: left; display: block;" class="animate-repeat" ng-repeat="recentupload in recentuploads | filter:search.text">

                                        </li>
                                </ul>
                            </div>
                            <ol class="flex-control-nav flex-control-paging"><li><a class="">1</a></li><li><a class="flex-active">2</a></li></ol><ul class="flex-direction-nav"><li><a href="#" class="flex-next">Next</a></li><li><a href="#" class="flex-prev">Previous</a></li></ul></div>
                        </div>
                </div>

And here's the AngularJS controller:

app.controller('recentuploadsController', function ($scope, $http) {
  //  console.log("Angular in role now");
    /**
     * Get list of all hashtags realtime
     */
$scope.getTimely = function(day) {
                //alert('here');
                $scope.days = day;
                $http.get(base_url + 'getAllUsers/getRecentUploads?key='+day).success(function(data, status, headers, config)
                {
                 $scope.recentuploads= data;   
                 $scope.search = {text:null};
                  $scope.clearSearch = function () {
                $scope.search={text:null};
            }
                $scope.loadTrendingStuff = function(hashtag) {
                // get single hashtag id
                $scope.hashtag=hashtag


            }
                 console.log(data);
                $scope.$apply(function() {
     $rootScope.data = data;
});
                });
            }


    $http.get(base_url + 'landing/getRecentUploads').
        success(function(data, status, headers, config) {
            // this callback will be called asynchronously
            $scope.recentuploads = data;
            $scope.search = {text:null};
            $scope.clearSearch = function () {
                $scope.search={text:null};
            }
            $scope.loadTrendingStuff = function(hashtag) {
                // get single hashtag id
                $scope.hashtag=hashtag



            }




        }).
        error(function(data, status, headers, config) {
            // called asynchronously if an error occurs
            // or server returns response with an error status.
    });






});

I would like to know where am I wrong? The data is posted from the backend and is logged to the console well. But the view is not updated. Why is that? Is it that two instances of same controller are created when I use it twice in my application (as I read while researching). Please answer. Thanks!

kirobo
  • 293
  • 3
  • 16
  • Yes, two instances are created. Keep both the divs in the same controller instance. – TheRodeo Feb 12 '15 at 12:18
  • Is there any possible other way. I could not keep the divs same (the designer didn't know we'll be using Angular) and it will be like recreating th whole thing. Can I put this controller on body perhaps? but there are other controllers too in the body - will the be disturbed in exercising that? – kirobo Feb 12 '15 at 12:25
  • Can you put a div that contains those two? If yes you can put the ng-controller attribute on the main div. – Giulio Molinari Feb 12 '15 at 13:21
  • keep both divs in one main div and assign controller there, here what happening is there two separate controllers are having separate scopes, so one does not affect other. – Nitu Bansal Feb 12 '15 at 13:30

3 Answers3

0

You could try encapsulating the two divs in another div without any css class so that it wont break any view. If the divs are in separate containers and giving single controller value is not an option, you could try using diffrent controllers and try communicating amoung them. This might help. What's the correct way to communicate between controllers in AngularJS?

Community
  • 1
  • 1
paje007
  • 1,001
  • 7
  • 9
  • My question is that just like ng-controller="recentuploadsController", there are other divs in the page too which get updated by AngularJS. – kirobo Feb 12 '15 at 13:36
  • Sorry, Pressed the return key too fast My question is that just like ng-controller="recentuploadsController", there are other Divs in the page too which get updated by AngularJS. Now I tried using a globalController in body tag. But I get, this erro: Error: [$rootScope:inprog] http://errors.angularjs.org/1.3.5/$rootScope/inprog?p0=%24digest A/ Is there a good example or trick which can help me. Please, thanks. – kirobo Feb 12 '15 at 13:43
  • Try injecting $rootScope as well. I dont know the extact cause of the error. But since you are using $rootScope in the controller, it needs to be injected as the $scope as well. – paje007 Feb 12 '15 at 14:34
  • Check the stack trace as it is mentioned in the angularjs docs. Recently I encountered the same issue and it was solved by enclosing the corresponding code in a $timeout( function() {}). Not sure what caused or resolved the issue. – paje007 Feb 13 '15 at 04:17
0

As paje007 suggested, I will also recommend to use separate controllers. It will solve your issue. Have a loot at this plunker. The example uses $rootScope.$emit and $rootScope.$on to communicate between Third and First controller.

Saad
  • 942
  • 6
  • 15
0

Finally figured out what was wrong, for others, here is what I did:

Seperated the controllers, made a service method to share the data and as Saad explained in example, I used the $routeScope.$on trigger to update data on every request.

Hope it helps others!

kirobo
  • 293
  • 3
  • 16