How to pass value between two javascript files

Question

I have implemented a calender and on click I am getting the specified days. Snippet from Calender.js:

$scope.checkDate = function(key){
    $scope.dateKey = key - 1;
    alert("left")
    alert($scope.dateKey)
      if ($scope.dateKey>=1){
          alert("Testing")

      }
    if(dateKey == 0) {
      $rootScope.loadNextDay = true;
     alert("right")
    }
  };

Now the value of dateKey I am getting is somewhere from 0 to 6 depending on the day selected. Now I am trying to use the variable ie $scope.dateKey in another js file(a new one). Snippet of application.js:-

  if($scope.currentDate = true && shift==0)
  {
    alert("Hey.....")
      alert($scope.dateKey)

  }
    else{
      alert("Testing123")
    $scope.moveTo(0);
    $scope.currentDate = false;
    $timeElapsed.hide();
    params.starthour = 0;
}

But in this $scope.dateKey is giving undefined. What should I do to use the value of dateKey from calender.js to application.js?

what do you mean with another js file? another controller? service? — pedrommuller, Jun 20 '14 at 13:20
another javascript file..I have made use of controller inside the javascript file.But both files have different controllers. — , Jun 20 '14 at 13:22

score 4 · Accepted Answer · edited May 23 '17 at 12:08

The best way to share information across multiple controllers are services, since services are singletons it's easier to manage a and isolate a scope/variables for that purpose.

a basic example:

var app = angular.module('myApp', []);
app.factory('datepickerinfo', function() {
    var keyValue;

    datepickerinfo.setKey = function(key) {
    keyValue = key;
    };
    datepickerinfo.getKey = function(){
    return keyValue;
    }

    return datepickerinfo;
});

//you can inject your dependency and share the it across multiple controllers

function MyCtrl($scope, datepickerinfo) {
    $scope.dateKey = datepickerinfo.getKey();
}

take a look to this question for further reference.

there's other option, write to a $rootscope, and rise an event using a emit it worth to mention that emit seems to be more efficient rather than $broadcast

$emit: Dispatches an event name upwards through the scope hierarchy notifying the registered $rootScope.Scope listeners.

score 0 · Answer 2 · answered Jun 20 '14 at 13:22

0

To make data persistent throughout your angularJS applications you should implement services. The documentation on service may be quite confusing for a beginner in angular, but it will help you to understand how to organize your angular applications:

https://docs.angularjs.org/guide/services

answered Jun 20 '14 at 13:22

Nikolas

1,166
1
6
11

@Nikholas..can I create a service in the same js file or do I have to make a different js file for services. – Jun 20 '14 at 13:25
I don't realy know what you mean by files. The organization of your code in different files should not influence the architecture of your angular application. From the code you posted above I understand that you are still a beginner with angular. I think you should read the tutorial on the angularJS homepage first. It will answer many of your question. – Nikolas Jun 20 '14 at 13:29

bguiz · Answer 3 · 2014-06-24T23:16:19.223

This article discusses how to make one controller communicate with another.

In summary you create a service, which does $rootScope.$broadcast() to send messages to other controllers.

This assumes, of course that communicating between two controllers is what you are trying to achieve. It is is not entirely clear from your question if that is indeed the case - you mention $scope in two different files.

The $scope in two different Javascript files is (almost certainly) going to be different objects in memory, as it is quite likely, they belong to different controllers (or services, factories, or directives). It is not possible to tell, unless you post the entire source of these two files.

However, it is likely, that this is the reason why defining a property on one $scope is not accessible from the other $scope.

How to pass value between two javascript files

3 Answers3