How to get a ng-model value from another controller in angularjs

Question

I want to access the value of the model date from another controller, and make a request passing this value in a json object. But this ng-model is in the scope of the controller DateParseCtrl and this controller is inside another controller called mainController. How can I access this value and pass to a json object from mainController? Ps: I just want get date value from mainController.

index.html

<body ng-controller='mainController'>
    <datepicker date-format="dd/MM/yyyy" selector="form-control"
                ng-controller='DateParserController'>
         <input type="text" uib-datepicker-popup="{{ format }}"
                ng-model='date' ng-blur='getSomething()'/> 
    </datepicker>
</body>

date-parse-ctrl.js

angular.module('myApp')
.controller('DateParserCtrl', function($scope, uibDateParser){
    $scope.format = 'dd/MM/yyyy';
    $scope.date = new Date();
});

mainController

angular.module('myApp')
.controller('mainController',  function($scope, $http){
    var date = $scope.date;
    $scope.getSomething = function(){
        $http({
            method: 'POST',
            url: 'url',
            data: {date: date}
        })
    }
});

Possible duplicate of [Share data between AngularJS controllers](https://stackoverflow.com/questions/21919962/share-data-between-angularjs-controllers) — Aleksey Solovey, Jun 12 '18 at 12:50

score 1 · Accepted Answer · answered Jun 12 '18 at 12:49

1

With events

date-parse-ctrl.js

angular.module('myApp')
.controller('DateParserCtrl', function($scope,$rootScope, uibDateParser){
    $scope.format = 'dd/MM/yyyy';
    $scope.date = new Date();
    var dat=$scope.data;
    $rootScope.$broadcast('sendDate',dat)
});

mainController

angular.module('myApp')
.controller('mainController',  function($scope, $http){
    $scope.$on('sendDate',function(event,data){
        $scope.dateFromCtrl=data;
    })
    $scope.getSomething = function(){
        $http({
            method: 'POST',
            url: 'url',
            data: {date: $scope.dateFromCtrl}
        })
    }


});

answered Jun 12 '18 at 12:49

T. Sardelis

79
5

Also you can fire the event every time the value of date changes, inside the getSomething() function – T. Sardelis Jun 12 '18 at 13:02
I tried include this code `$scope.$on('sendDate',function(event,data){ $scope.dateFromCtrl=data; })`, in the getSomething() function, but it not works :/ – Diego Soares Jun 12 '18 at 13:41

score 1 · Answer 2 · answered Jun 15 '18 at 22:02

Another approach is to provide the date as an argument to the getSomething function:

<body ng-controller='mainController'>
    <datepicker date-format="dd/MM/yyyy" selector="form-control"
                ng-controller='DateParserController'>
         <input type="text" uib-datepicker-popup="{{ format }}"
                ng-model='date' ̶n̶g̶-̶b̶l̶u̶r̶=̶'̶g̶e̶t̶S̶o̶m̶e̶t̶h̶i̶n̶g̶(̶)̶'̶
                ng-blur='getSomething(date)' /> 
    </datepicker>
</body>

Then use that argument in the main controller:

angular.module('myApp')
.controller('mainController',  function($scope, $http){
    ̶v̶a̶r̶ ̶d̶a̶t̶e̶ ̶=̶ ̶$̶s̶c̶o̶p̶e̶.̶d̶a̶t̶e̶;̶
    ̶$̶s̶c̶o̶p̶e̶.̶g̶e̶t̶S̶o̶m̶e̶t̶h̶i̶n̶g̶ ̶=̶ ̶f̶u̶n̶c̶t̶i̶o̶n̶(̶)̶{̶
    $scope.getSomething = function(date){
        $http({
            method: 'POST',
            url: 'url',
            data: {date: date}
        })
    }
});

How to get a ng-model value from another controller in angularjs

2 Answers2