角度調整窗口大小的信息

Question

我只是發表了這種小提琴，認為它可能對像我這樣的人有所幫助。 它顯示了如何將普通的javascript傳遞給角度范圍。 在這種情況下，范圍將獲取窗口內部尺寸信息。

http://jsfiddle.net/spacm/HeMZP/

對於個人用途，我將這些信息傳遞給角度范圍：

• 寬度和高度
• 方向/方向改變
• iframe檢測
• 操作系統檢測

使用navigator.platform變量

function isInIFrame(){
    return window.location !== window.parent.location;
}

function updateMediaInfoWH() {
    if((typeof(mediaInfo.inIFrame)!='undefined') && (!mediaInfo.inIFrame)) {
        mediaInfo.width = innerWidth;
        mediaInfo.height = innerHeight;
        updateMediaInfoOrientation();
    }
    tellAngular();
}

function tellAngular() {
    console.log("tellAngular");
    var domElt = document.getElementById('mainContainer');
    scope = angular.element(domElt).scope();
    console.log(scope);
    scope.$apply(function(){
        scope.mediaInfo = mediaInfo;
        scope.info = mediaInfo.width;
    });
}

歡迎發表任何評論。

Answer 1

我看不到要回答的問題，因此我假設您的問題正在尋找您的想法的輸入。

開始使用Angular可能與您通常的工作方式大不相同，主要是因為它們完全並完全使用了依賴項注入。

您不必“告訴” Angular任何東西，您應該能夠通過注入的依賴項Angular服務訪問所有這些信息。

使用您顯示給我的內容，它看起來可能像這樣：

my.MediaInfo = function($window) {
  this.window_ = $window;
  this.inIframe = $window.self !== $window.top;
  if(!this.inIFrame) {
    this.width = $window.innerWidth;
    this.height = $window.innerHeight;
  } else {
    this.width = this.height = ...;
  }
}

my.angular.controller = function($scope, mediaInfo) {
  // {width: X, height: Y, inIframe: false}
  $scope.mediaInfo = mediaInfo;
}

然后，您的Angular模塊將如下所示：

angular.module('module', [])
    .service('mediaInfo', my.MediaInfo)
    .controller('mainCtrl', my.angular.controller);

希望這很好地演示了如何將數據導入Angular。