4

私のような人に役立つかもしれないと考えて、このフィドルを公開しました。これは、単純な JavaScript を角度スコープに渡す方法を示しています。この場合、スコープはウィンドウの内部サイズ情報を取得します。

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

個人的な使用のために、これらの情報を angular スコープに渡します。

  • 幅と高さ
  • 向き・向き変更
  • iframe 検出
  • OS 検出

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

どんなコメントでも大歓迎です。

4

1 に答える 1

6

答えるべき質問が見当たらないので、あなたの質問はあなたのアイデアに関する情報を求めているものだと思います。

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 にデータを取り込む方法の良いデモンストレーションになることを願っています。

于 2013-01-22T02:17:21.477 に答える