How to share data between controllers in different modules

Question

I have downloaded Angular UI Bootstrap Datepicker, and I need to access to its controllers for their scopes. But I have absolutely no idea how to do it without editing the code in Datepicker, which I think isn't the way it should be done.

So I have my own app/module, myApp and I have a controller MyController, in which I need access to UibDatepickerController and UibDaypickerController, which are in ui.bootstrap.datepicker app/module. And I don't want to change the code in ui.bootstrap.datepicker module.

This is basically the same problem I posted while ago but I have figured it out a lot I think. (Spent like 50 hours in this one :D)

This solution doesn't work because you can't inject controller like you can inject a service.

Here is kind of my design:

Controller:

function MyCtrl() {
var vm = this;
vm.dt = new Date();
vm.options = {
  ...
};
vm.refresh = function() {
  //returns initialized value all the time (current date)
  console.log(vm.dt);
  $("#calendar").data("$uibDatepickerController").refreshView();
}
};
angular.module('myApp')
   .controller('MyCtrl', MyCtrl);

HTML:

<div ng-controller="CalendarCtrl as calCtrl">
  <pre>Selected date is: <em>{{calCtrl.dt | date:'fullDate' }}</em>
  </pre>
  <div style="display:inline-block">
    <div uib-datepicker="" id="calendar" ng-model="calCtrl.dt" datepicker-options="calCtrl.options"></div>
  </div>
  <button ng-click="calCtrl.refresh()">Refresh</button>
</div>

What, specifically, do you need access to? The date/day selected or something internal? — MPawlak, Aug 27 '16 at 01:52
Selected date and also I need the ui.bootstrap.datepicker module to be able to have access to my variables in my controller. — Dope, Aug 27 '16 at 01:54
For the date I'd just bind the value of the element to a variable in your controller, for direct controller to controller access Niles' answer is closer to what you'd want. Can you post a fiddle or something similar so we can better understand where you're trying to go? — MPawlak, Aug 27 '16 at 02:01
I had kinda similar scenario where I had to include custom logic with date picker; for which I created a directive wrapped over bootstrap date picker and included my custom logic in directive — Developer, Aug 27 '16 at 02:15
Could you please give some more information about that. I have studied directives for only a few hours now so I'm not sure how to do that. I had that same kind of idea myself that I could solve this with directives. Also now there is a brief code example in the question — Dope, Aug 27 '16 at 02:31
I would like to point out that you really shouldn't be working with the DOM in your controller. That is typically done in a Directive. — ewahner, Aug 27 '16 at 02:50
Sorry, I'm not sure what you mean by that. Would you care to elaborate? Okay after some googling now I know. Thank you! — Dope, Aug 27 '16 at 03:08

score 0 · Answer 1 · answered Aug 27 '16 at 01:57

0

you make a service something like:

app.factory('thisfactory',function(){
  var data = null;
  var get = function(){
    return data;
  }
  var save = function(newData){
    data = newData;
  }
  return {get:get,save:save}
});

then you inject the factory into each controller and use it to pass data back and forth using the save and get methods

answered Aug 27 '16 at 01:57

Niles Tanner

3,911
2
17
29

This would require me to edit code in ui.bootstrap.datepicker module, but it starts to seem as if there was no other option – Dope Aug 27 '16 at 02:02

score 0 · Answer 2 · answered Aug 27 '16 at 02:47

If you really need access in another module or controller to a value that is set in your View. You can do what Niles has mentioned or you can setup a watch and then broadcast that so that other modules, controllers can access the value, but not the reference.

(function(){
    angular.controller("testController", testController);
    angular.controller("otherController", otherController);

    testController.$inject = ["$scope", "$rootScope"];
    otherController.$inject = ["$scope"];

    function testController($scope, $rootScope) {
        var vm = this;
        $scope.$watch("vm.datePicker", function(newValue){
            $rootScope.$broadcast("DATEPICKER_CHANGED", newValue);
        });
    }

    function otherController($scope) {
        var vm = this;

        $scope.$on("DATEPICKER_CHANGED", function(event, obj) {
            console.log(obj);
        });
    }
})();

How to share data between controllers in different modules

2 Answers2