AngularJS - переменные переменной $, не обновленные на заводе

Question

Для создания видеозвонков с webRTC я использую ONSIP.JS api. В моем угловом приложении я создал фабрику VideoSupport.

Когда функция вызывается через действие пользователя, переменные $ scope обновляются в DOM. Однако при запуске функции, прослушивая мой объект сеанса RTC, DOM ничего не меняет.

Когда я только что сделал прототип в своем контроллере вместо фабрики, я смог решить проблему, вызвав $ scope. $ Apply в функции setStatus. Но это невозможно на заводе.

Итак, пример: Я запускаю функцию sendInvite -> кнопка приглашения отключается .. это работает.

Когда другая сторона принимает вызов, вызывается «принятая» функция внутри setSession. Каждая переменная, которая изменяется этим последним действием, не отражается в моей DOM. Все кнопки остаются отключенными.

Контроллер:

function SupportController($scope, $stateParams, navigationService, $css, VideoSupportFactory) { 

    $scope.VideoSupport = VideoSupportFactory; 
    $scope.VideoSupport.createUA(); 

} 

Фабрика:

function VideoSupportFactory($modal) { 
    var remoteMedias = angular.element(document.querySelector('#remote-media')); 
    var remoteMedia = remoteMedias[0]; 

    return { 
     disableTerminate: true, 
     disableAccept: true, 
     disableInvite: false, 
     _volume: 50, 
     mute:false, 

     createUA: function (credentials) { 
      if (credentials !== null && typeof credentials === 'object') { 
       this.ua = new SIP.UA(credentials); 
       this.ua.on('invite', this.handleInvite.bind(this)); 
      } else { 
       this.ua = new SIP.UA(); 
      } 
     }, 

     handleInvite: function (session) { 
      if (this.session) { 
       session.reject(); 
       return; 
      } 

      this.setSession(session); 
      this.disableAccept = false; 
     }, 

     acceptSession: function() { 
      if (!this.session) { 
       return; 
      } 

      this.disableAccept = true; 
      this.session.accept(remoteMedia); 
     }, 

     sendInvite: function() { 
      var session = this.ua.invite('test123@behousing.onsip.com', remoteMedia); 
      this.setSession(session); 
      this.disableInvite = true; 
     }, 

     setSession: function (session) { 
      session.on('progress', function() { 
       progressSound.play(); 
       this.setStatus('progress', true); 
      }.bind(this)); 

      session.on('accepted', function() { 
       console.log(session); 
       progressSound.pause(); 
       this.setStatus('accepted', true); 
      }.bind(this)); 

      session.on('failed', function() { 
       progressSound.pause(); 
       this.openModal('sm', 'Oops!', 'The connection could not be established...'); 
       this.setStatus('failed', false); 
       delete this.session; 
      }.bind(this)); 

      session.on('bye', function() { 
       this.setStatus('bye', false); 
       delete this.session; 
      }.bind(this)); 

      session.on('refer', session.followRefer(function (req, newSession) { 
       this.setStatus('refer', true); 
       this.setSession(newSession); 
      }.bind(this))); 

      this.session = session; 
     }, 

     setStatus: function (status, disable) { 
      this.mainClass = status; 
      this.disableInvite = disable; 
      this.disableTerminate = !disable; 
      //$scope.$apply(); 
     }, 

     terminateSession: function() { 
      if (!this.session) { 
       return; 
      } 

      progressSound.pause(); 
      this.setStatus('bye', false); 
      this.session.terminate(); 
     }, 

     sendDTMF: function (tone) { 
      if (this.session) { 
       this.session.dtmf(tone); 
      } 
     }, 

     volume: function (newVolume) { 
      if (arguments.length) { 
       console.log('Setting volume:', newVolume, parseInt(newVolume, 10)); 
       remoteMedia.volume = (parseInt(newVolume, 10) || 0)/100; 
       return (this._volume = newVolume); 
      } else { 
       return this._volume; 
      } 
      ; 
     }, 

     toggleMute: function() { 
      if (!this.session) { 
       return; 
      } 

      if (this.mute) { 
       this.session.unmute(); 
       this.mute = false; 
      } else { 
       this.session.mute(); 
       this.mute = true; 
      } 

     }, 

     openModal: function (size, title, text) { 
      var modalInstance = $modal.open({ 
       animation: true, 
       templateUrl: 'SupportModalContent.html', 
       controller: 'SupportModalInstanceCtrl', 
       size: size, 
       resolve: { 
        title: function() { 
         return title; 
        }, 
        text: function() { 
         return text; 
        } 
       } 
      }); 
     } 

    } 
} 

Answer 1

не уверен, что это правильный способ сделать это, но вы можете попробовать шаблон наблюдателя, я просто поставить один varient ниже:

setStatus: function (status, disable) { 
     this.mainClass = status; 
     this.disableInvite = disable; 
     this.disableTerminate = !disable; 
     //$scope.$apply(); 
     this.notifyObservers(); 
    }, 
    observers: [], 
    notifyObservers: function(){ 
     this.observers.forEach(function(notifyFn){ 
      notifyFn(); 
     }); 
    }, 
    addObserver: function(notifyFn){ 
     this.observers.push(notifyFn); 
    } 


    ... 
    // in controller 

    $scope.VideoSupport = VideoSupportFactory; 
    $scope.VideoSupport.createUA(); 
    $scope.VideoSupport.addObserver(update); 
    function update(){ 
     $scope.$apply(); 
    } 

, конечно, самый простой взлом может быть, просто наблюдая за некоторым параметром:

$scope.$watch('VideoSupport.mainClass', function() { 
    console.log('status changed'); 
});