AngularJS - 在两个 Controller 之间共享变量

Question

我有两个必须相互通信的 Controller 。第一个引用视频播放器，第二个引用时间线。

从第一个，我得到了视频播放的 currentTime，我想将它传递给第二个，它应该在视频播放时移动时间栏。

我尝试使用工厂在 Controller 之间共享一个名为 time 的变量，但这在这段时间内不会改变。

第一个 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
          })
        });
    }]);

第二 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('Timeline', function(){
    var timelines = [];
    var time = null;
    return {

      getTime: function() {
        return time;
      },

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

    }
  });

Answer 1

time 似乎是一个原语，这意味着它是 byVal 而不是 byRef 返回的。换句话说，每次调用 getTime 都会返回 time 当前设置的值，调用 setTime 会改变 future 的值调用，但不调用任何已经调用它的东西。这是 Angular 规则的经典案例，始终使用点。

尝试将 time 改为一个对象:

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

    getTime: function() {
      return time;
    },

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

  }
});

在您的 HTML 中，使用 {{time.value}}。