Friday, 14 April 2017

andgularjs share data between two modules

I am creating some web application with node.js and angularjs.

I've got some problem with angularjs.

Situation is like this:

  1. Student page displays student list that is stored in Mongodb (I'm using mongoose to call them)
  2. The list contains buttons that are detail and delete.
  3. When I click the detail button, it will request post to server with student data(extracted by index id)
  4. it returns right data(JSON.stringfy) to angularjs callback but its console.log is not displayed because of $window.location.href.(if I comment out them, it will show exact data I want and works fine.(it goes to detail page but no console logs at callback)
  5. I put the exact data in service and want to use the data with new template( not student page. it's detail page).
  6. but it still displays undefined and is not working.(data sharing does not work)

     var app = angular.module("datalist", []);
    
    
    
    angular.module("datalist").service('datastore', function () {
        var detaildata = [];
        var addlist = function (newObj) {
            detaildata.push(newObj);
        };
        var getlist = function () {
            return detaildata;
        };
        return {
            addlist: addlist,
            getlist: getlist
        };
    });
    
    
    
      app.controller('datadisplay', 
       ['$scope', '$http', '$window','datastore', 
       function ($scope, $http, $window, datastore) {
            $scope.slist = [];
            $scope.detail = [];
            $scope.shared = [];
           $http.get('/studentlists').then(function (result) {
               console.log('data sent');
            $scope.slist = result.data.results;
    });
    // detail button!!!!
    $scope.detail = function (dataid) {
        var student = $scope.slist[dataid];
        $http({
            url: '/detail',
            method: 'POST',
            dataType: 'JSON',
            data: { 'name': student.name, 'age': student.age }
        }).then(function mySucces(response) {                
            console.log('data received');
            //console.log(response.data);
            //$scope.detail = response.data.detail;
            $scope.shared = JSON.parse(response.data.detail);
            datastore.addlist(response.data.detail); // this does not appear on console log
            var data = datastore.getlist();
            console.log(data);
            if (data.length >= 1) {
                //$window.location.href = '/detail';
            }
        }, function myError(response) {
            console.log(response);
        });
       // $scope.$apply();
    }
    }]);
    
    
    
    
    app.controller('detail', 
    ['$scope', 'datastore', 
    function ($scope, datastore) {
        var data = [];
        console.log(datastore.getlist());
        $scope.test = function () {
            data = datastore.getlist();
            $scope.details = JSON.parse(data);
            console.log(data);
            console.log('data on');
        }
    }]);
    
    var app2 = angular.module("datalist2", ["datalist"]);
    
    app2.controller('detail', ['$scope', 'datastore', function ($scope, datastore) {
        var data = [];
        $scope.details = [];
        $scope.test = function () {
            data = datastore.getlist();
            $scope.details = data;
            console.log(data);
            console.log('data on');
        }
    }]);
    
    

Student page

when detail button clicked and console.log at callback



via Chi Seong Oh

No comments:

Post a Comment