窗口大小调整信息在角

window resizing info in angular

本文关键字：信息 调整 窗口大小      更新时间：2023-09-26

我只是发表了这篇文章，认为它可能对像我这样的人有帮助。它展示了如何将普通javascript传递到角作用域。在这种情况下，作用域获取窗口的内部大小信息。

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

对于个人使用，我将传递这些信息给angular作用域:

  • 宽度,heigth
  • 方向/方向变化
    • <
  • iframe检测/gh><
  • 操作系统检测/gh>

使用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;
    });
}

欢迎评论

我没有看到需要回答的问题，所以我假设你的问题是在寻找对你的想法的输入。

使用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。

相关文章：