CODEWITHSUNDEEP
angularjs
Teknotica
Teknotica

Reputation: 1136

Binding $scope object in two different pages

I'm a newbie in AngularJS and can't figure out how to do the following:

How can I update two different pages listing the same $scope object?

Basically, I have an admin page where I can add/update/delete items in the DB, and another page where I list those items. Once an item is added/updated/deleted I want to see the changes immediately. That's ok in the admin page, but what about the front page?

Thanks in advance for any help on this!

My code looks something along these lines:

script.js

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

menuApp.factory("serverRequest", function($http) {

    return {
        getDishes: function() {        
             return $http.get('../request.php?action=get')
             .then(function(result) {
                  return result.data;
             });
        },
        addDish: function (dish) {      
            return $http.get('../request.php?action=add', {
                params: {data : dish}
            })
            .then(function(result) {
                return result.data;
             });            
        }
   }
});

function appController($scope, serverRequest) {

    // Add new dish
    $scope.addNewDish = function(dish) {    
        serverRequest.addDish(dish);    
        $scope.dishes.push(dish);       
    }

    // Get menu dishes in DB
    $scope.dishes = serverRequest.getDishes().then(function(d) {
        $scope.dishes = d;
    });    
}

admin.html and index.html

<div ng-controller="appController">

    <ul>
        <li ng-repeat="(key,dish) in dishes">
            <a ng-click="editDish(dish.id, key)">{{dish.name}}</a>
        </li>
    </ul>

</div>

Upvotes: 0

Views: 86

Answers (1)

Mark-Sullivan
Mark-Sullivan

Reputation: 186

Try this

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

menuApp.service("serverRequest", ['$http', function($http) {

    return {
        getDishes: function() {        
             return $http.get('../request.php?action=get');

             // You want to use your service to return a promise
             // to you - you won't actually get the data until 
             // the promise resolves - so put the 'then' in your controller
             // when the request is made
             // then(function(result) { return result.data; })

        },
        addDish: function (dish) {      
            return $http.get('../request.php?action=add', { params: {data : dish} });

            // see comment above...
        }
   }
}]);

menuApp.controller('appController', ['$scope', 'serverRequest', 
    function ($scope, serverRequest) {

        // Add new dish
        $scope.addNewDish = function(dish) {    
            serverRequest.addDish(dish);    
            $scope.dishes.push(dish);       
        }

       // Get menu dishes in DB
       $scope.dishes = serverRequest.getDishes().then(function(d) {
          $scope.dishes = d;
       }
    }]);

Upvotes: 1

Related Questions