Unable to get the scope data to the html page using factory in angularjs

Question

I'm able to send the same json data from home.js to content.js.But I'm unable to populate the content.js scope data into the html page

Can anyone please help me out regarding this issue ...

My home.js:

angular.module('myApp')
   .controller('firstCtrl', ['$scope', 'myService',
                            function ($scope,myService) {

  $scope.list1= [];
         $scope.list2= [];

 var sampleItem = this.item;
            myService.setJson(sampleItem);

 $.each($scope.samples, function (i, x) {
                  if (x.name === sampleItem .secName && x.id === sampleItem .id) {

                     if (sampleItem .secName === $scope.secsList[0]) {

                        $scope.list1.push(x);


                     } 
                     else {

                        $scope.list2.push(x);
                     }
                     $scope.myData = x.dataList;


                  }
               });
               });

My content.js :

 angular.module('myApp')
    .controller('secondCtrl', function ($scope,myService) {

      $scope.myreturnedData = myService.getJson();

        console.log($scope.myreturnedData);

    })

  .factory('myService', function(){
    var sampleItem = null;
     return {
     getJson:function(){
       return sampleItem;
     },
     setJson:function(value){
      sampleItem = value;
     }
     }

});

My content.html :

  <div ng-controller="secondCtrl" > {{myreturnedData.sampleName}}</div>

My home.html:

<div ng-controller="firstCtrl" ng-repeat="item in list1" >
                        <div > {{item.sampleName}} </div>
                        </div>

Please, provide full html code. I think, you have mistake in controller firstCtrl in html. — Stepan Kasyanenko
– Stepan Kasyanenko, Commented Feb 17, 2016 at 5:44
I had edited the code.In the home.html, I'm able to populate data but unable to display data in content.html.can u please help me out ... — dev777
– dev777, Commented Feb 17, 2016 at 6:13
ya,I've checked ur answer.Thanks a lot for ur info.I did the same thing in my code.But unable to populate the data in html page — dev777
– dev777, Commented Feb 17, 2016 at 6:21
Please, provide your code in jsfiddle. Then we can solve your problem. — Stepan Kasyanenko
– Stepan Kasyanenko, Commented Feb 17, 2016 at 6:26

Stepan Kasyanenko · Accepted Answer · 2016-02-17 05:56:11Z

This is work solution jsfiddle

angular.module('ExampleApp',[])
  .controller('firstCtrl', function($scope, myService) {

      $scope.sampleItem = {
        sampleName: "sampleName"
      };
      myService.setJson($scope.sampleItem);
    }
  )
  .controller('secondCtrl', function($scope, myService) {

    $scope.myreturnedData = myService.getJson();

    console.log($scope.myreturnedData);

  })
.factory('myService', function() {
  var sampleItem = null;
  return {
    getJson: function() {
      return sampleItem;
    },
    setJson: function(value) {
      sampleItem = value;
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="ExampleApp">
  <div ng-controller="firstCtrl">
  <h2>
  firstCtrl
  </h2>
    <input ng-model="sampleItem.sampleName">
  </div>
  <div ng-controller="secondCtrl"> <h2>
  secondCtrl
  </h2>{{myreturnedData.sampleName}}</div>
</div>

Collectives™ on Stack Overflow

Unable to get the scope data to the html page using factory in angularjs

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