retrieving data from a different controller in AngularJS

Question

retrieving data from a different controller in AngularJS

Having an issue with passing data from rootScope.reslogin2 to scope.user. It's not displaying as expected, here is my JavaScript file:


app.controller("logincont", ['$scope','$http','md5','$window','$rootScope',function($scope,$http,md5,$window,$rootScope){
     $scope.$watch('pass', function(val) {
          $scope.password = md5.createHash($scope.pass || '');
        });
    $scope.cari = function () {
            $http.get('http://localhost:8089/MonitoringAPI/webresources/login?a='+$scope.userid+'&d='+$scope.password).then(function(response){
           $scope.reslogin  = response.data;
           $rootScope.reslogin2 = response.data[0].username;
           $scope.reslogin3 = response.data[0].lsmenu[0].idmenu; 
           console.log($scope.reslogin);
           console.log($scope.reslogin2);
      });
          };   
}]);


app.controller("moncont", ['$scope','$http','$filter','$rootScope',function($scope,$http,$filter,$rootScope){
      $scope.user = $rootScope.reslogin2;
      console.log($scope.user);
}]);

Want the content of

<p>Username : {{user}}</p>

to display properly.

javascript angularjs rootscope

Answer 1

Answer №1

Ensure that a value is properly assigned before attempting to access it. Within the moncont controller, monitor $rootScope.reslogin2 and assign its value to $scope.user in the watch function.

Answer 2

Ensure that a value is properly assigned before attempting to access it. Within the moncont controller, monitor $rootScope.reslogin2 and assign its value to $scope.user in the watch function.

Answer 3

Answer №2

user from moncont module not in sync with the desired value. To resolve this issue, instead of assigning

$scope.user = $rootScope.reslogin2;

, you can define a getter using Object.defineProperty:

angular.module('app', [])
  .controller('logincont', function($rootScope, $scope, $timeout) {
    $scope.cari = function() {
      $timeout(function() {
        $rootScope.reslogin2 = ($rootScope.reslogin2 || 0) + 1;
      }, 1000)
    }
  })
  .controller('moncont', function($rootScope, $scope) {
    Object.defineProperty($scope, "user", {
      get: function() {
        return $rootScope.reslogin2
      }
    });
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<div ng-app='app'>
  <div ng-controller='logincont'>
    <button ng-click='cari()'>Cari</button>
  </div>
  <div ng-controller='moncont'>
    user: {{user}}
  </div>
</div>

Answer 4

user from moncont module not in sync with the desired value. To resolve this issue, instead of assigning

$scope.user = $rootScope.reslogin2;

, you can define a getter using Object.defineProperty:

angular.module('app', [])
  .controller('logincont', function($rootScope, $scope, $timeout) {
    $scope.cari = function() {
      $timeout(function() {
        $rootScope.reslogin2 = ($rootScope.reslogin2 || 0) + 1;
      }, 1000)
    }
  })
  .controller('moncont', function($rootScope, $scope) {
    Object.defineProperty($scope, "user", {
      get: function() {
        return $rootScope.reslogin2
      }
    });
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<div ng-app='app'>
  <div ng-controller='logincont'>
    <button ng-click='cari()'>Cari</button>
  </div>
  <div ng-controller='moncont'>
    user: {{user}}
  </div>
</div>

Answer 5

Answer №3

To implement this functionality, insert the provided method into your controller.

$scope.initialize = function(){
   $scope.user = $rootScope.reslogin2;
   console.log($scope.user);
}

Your HTML template should resemble the following:

<div ng-controller="moncont" ng-init="initialize()">
    <p>User: {{user}}</p>
</div>

Answer 6

To implement this functionality, insert the provided method into your controller.

$scope.initialize = function(){
   $scope.user = $rootScope.reslogin2;
   console.log($scope.user);
}

Your HTML template should resemble the following:

<div ng-controller="moncont" ng-init="initialize()">
    <p>User: {{user}}</p>
</div>

retrieving data from a different controller in AngularJS

Answer №1

Answer №2

Answer №3

Similar questions

Manifestation for JSON Firebug extension

Remove the post by utilizing the $.ajax function

Unable to bind Firebase snapshot.val() to $scope variable

Unable to retrieve req.files using multer from the req object

Encountering an "XML Parsing Error: no element found Location" error in AngularJS $http when JSON results are expected on a GET request

What are some of the potential drawbacks of utilizing the same template ref values repeatedly in Vue 3?

Store various dropdown selections in an array

Ways to retrieve the innerHTML of a Script Tag

Looking for the optimal method to display numerous lines of text in HTML, one by one, at intervals of 60 seconds?

Arrange objects on a grid

How about: "Using Node.js and Express to declaratively define a route for

Using AngularJS, REST API, SpringSecurity, and Hibernate in any software program

Developing a Link Element in Angular 2

Incorporating a transparent icon onto an HTML background

Step-by-step guide to retrieving the value of a duplicate input field with identical IDs in Angular4

JavaScript believes that the function is not defined, despite its clear existence

Concealing my menu with overflow-x: hidden on the body is not an option

Issue with parse-angular-patch no longer functioning

When using VueJS routing with the same component, the OWL Carousel does not get triggered

Leveraging the power of AngularJS within an ASP.NET MVC architecture, bypassing