AngularJS - $ scope變量未在工廠更新

對於使用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('[email protected]', 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; 
        } 
       } 
      }); 
     } 

    } 
}

來源

2015-07-28 Yordi

不知道它是做正確的方式，但你可以嘗試觀察者模式，我剛剛把下面的一個變體光盤：

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'); 
});

來源

2015-07-28 15:32:28 mido

AngularJS - $ scope變量未在工廠更新

回答

相關問題