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

What is the best way to store the outcome of a promise in a variable within a TypeScript constructor?

An issue occurred while attempting to execute a function in AngularJS

What are the necessary headers that must accompany a post request?

Looking for guidance on writing a JASMINE test case for my method. I've been struggling to mock the event listener. Can you please direct me to a relevant link or share some mock examples

Having difficulty retaining the value of a variable following the retrieval of JSON data

Taking out the z-index from the transition code

Separating express routes into individual files

Which is better for your website: SSG vs SSR?

AngularJS: dynamic autocomplete field with scroll functionality

Guide to implementing if else statements with Protractor

Executing a JS function within a table cell

Utilizing JQuery to modify the element's id and trigger a function upon clicking

How can I prevent the same JavaScript from loading twice in PHP, JavaScript, and HTML when using `<script>'?

Is React.js susceptible to XSS attacks through href attributes?

Retrieve and display the number of items in the shopping cart directly from localStorage using React

Using an AngularJS directive to modify CSS styles

Issue: The keyword in React/React-Native is returning a boolean value instead of the expected element object

Navigating through the img src using JavaScript

AngularJS date formatting fails to properly format dates

Cloud function -> time stamps evaluation