AngularJS - share variable between two controllers

Question

I have two controllers that have to communicate each other. The first reference to a video player and the second one to a timeline.

From the first one, I get the currentTime of the video playback and I want to pass it to the second one that should move the time-bar as the video is playing.

I tried using the factory to share a variable called time between controllers but this doesn't change during the time.

First Controller:

angular.module('videoCtrl', ['vjs.video'])
  .controller('videoController', ['$scope', 'Timeline', function (scope, Timeline) {
        scope.mediaToggle = {
            sources: [
                {
                    src: 'http://static.videogular.com/assets/videos/videogular.mp4',
                    type: 'video/mp4'
                }
            ],
        };

        //listen for when the vjs-media object changes
        scope.$on('vjsVideoReady', function (e, videoData) {
          videoData.player.on('timeupdate', function () {
            var time = this.currentTime();
            Timeline.setTime(time); // setting the time on factory
          })
        });
    }]);

Second Controller:

angular.module('timelineCtrl', ['mt.media-timeline'])
    .controller('timelineController', function ($scope, Timeline) {
    $scope.time = Timeline.getTime(); // here I'm trying to get the time
  });

Factory:

.factory('Timeline', function(){
    var timelines = [];
    var time = null;
    return {

      getTime: function() {
        return time;
      },

      setTime: function(_time) {
        time = _time;
      }

    }
  });

Claies · Accepted Answer · 2017-04-29 15:46:27Z

5

time appears to be a primitive, which means it is returned byVal rather than byRef. In other words, each call to getTime will return the value that time is currently set to, and calls to setTime will change the value for future calls, but not for anything that already called it. This is a classic case of the angular rule, Always use a dot.

Try changing time to an object instead:

.factory('Timeline', function() {
  var timelines = [];
  var time = {
    value: null
  };
  return {

    getTime: function() {
      return time;
    },

    setTime: function(_time) {
      time.value = _time;
    }

  }
});

In your HTML, use {{time.value}}.

answered Apr 29, 2017 at 15:46

Claies

22.4k4 gold badges56 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

18 Comments

Angus Simons Over a year ago

but this is not updating the time variable in the other controller during playback. I was already able to get the time as the page load. I don't need time var in the HTML I need in the second controller. For example if I write console.log(_time) inside setTime(_time) function I get value of the currentTime changing while the video is playing

Angus Simons Over a year ago

this is the result of console.log(_time) [Log] 0 (script.js, line 35222) [Log] 0.125696053 (script.js, line 35222) [Log] 0.377129754 (script.js, line 35222) [Log] 0.626557536 (script.js, line 35222) [Log] 0.87789302 (script.js, line 35222) [Log] 1.052918579 (script.js, line 35222)

Claies Over a year ago

if the videoData.player.on('timeupdate',... is firing, then this object should be continually receiving new _time, and saving it into time.value. in either the other controller or it's associated HTML, time.value should have the last value that was posted by the videoData call.

Angus Simons Over a year ago

but if I put a console.log() in the second controller I don't get the same result.

Claies Over a year ago

what are you expecting to happen? a controller is a constructor function, it only fires once, so putting a console.log() in the controller would only output a value once, when the controller is initialized. If you want to do something every time that time.value changes, then you need $watch.

|

FotisK · Accepted Answer · 2017-04-29 15:41:54Z

0

Saving in $rootScope instead of $scope would give you the ability to access a variable across all your app and your controllers. But have in mind that creating a large number of $rootScope could affect your app's performance.

Do not forget to inject $rootScope into the controller (like you did with $scope), so you can access it.

answered Apr 29, 2017 at 15:41

FotisK

1571 gold badge5 silver badges10 bronze badges

3 Comments

Alon Eitan Over a year ago

This is not recommended at all, you can accidently overwrite the values of $rootScope and adding unnecessary $watchs

Claies Over a year ago

using $rootScope is, in almost every case, an anti-pattern. This is a case that can be solved by re-organizing the factory.

FotisK Over a year ago

Agree. @AlonEitan.

Riiverside · Accepted Answer · 2017-04-29 15:50:51Z

Well as far as I can tell what're doing in the second controller is that you retrieve the value of time on instantiation of the controller. Of course further changes of the value in the service can't be picked up this way. To do that can use $scope.$watch in the second controller:

angular.module('timelineCtrl', ['mt.media-timeline'])
    .controller('timelineController', function ($scope, Timeline) {
    $scope.time = Timeline.getTime(); //Set the time once so it's not undefined

    $scope.$watch(
      function() {return Timeline.getTime();},
      function(newVal) {$scope.time = newVal;}
    );
});

Angular will call the first function in every $digest cycle(That's about at least every 10ms if I recall correctly) and will call the second function when a change has been detected. Detailed documentation for $watch can be found here

This is one way to do it. You could also add a function to your $scope(e.g. getTime()), which should return the current time, and then call this function in the HTML template: {{getTime()}}. Both ways pretty much work the same way, except that the second one leaves the 'dirty' work to angular(creating watchers and updating values)

Collectives™ on Stack Overflow

AngularJS - share variable between two controllers

3 Answers 3

18 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

18 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related