角度调整窗口大小的信息

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。