web-dev-qa-db-ja.com

AngularJSディレクティブのグローバルjs変数にアクセスする方法

まず、私はチェックしましたが、質問をカバーする記事は見つかりませんでした。

AngularJSビルトインディレクティブで事前定義されたjsグローバル変数にアクセスする方法は？

たとえば、この変数を<script>var variable1 = true; </script>で定義します

次に、AngularJSディレクティブを作成します。

<div ng-if="variable1">Show some hidden stuff!</div>

これは実際には機能しません。

その後、ng-initを使用する必要があることが通知されます

だから私は次のような他の場所にコードを書いた：

<div ng-init = "angularVariable1 = variable1"></div>

そして、これは明らかにうまくいきません...これは悪循環のようです。事前定義されたjsグローバル変数にアクセスする必要があり、次にng-initを使用する必要があります。 ng-initを使用するには、グローバル変数にアクセスする必要があります。

これを行う特定の方法はありますか？

angularjsglobal-variables
51
windweller

AngularJSでこれを正しい方法で行う方法を示す working CodePen example を作成しました。 Angular $ window service は、windowに直接アクセスするとテストが難しくなるため、グローバルオブジェクトにアクセスするために使用する必要があります。

HTML：

<section ng-app="myapp" ng-controller="MainCtrl">
  Value of global variable read by AngularJS: {{variable1}}
</section>

JavaScript：

// global variable outside angular
var variable1 = true;

var app = angular.module('myapp', []);

app.controller('MainCtrl', ['$scope', '$window', function($scope, $window) {
  $scope.variable1 = $window.variable1;
}]);
95
Adam Thomas

グローバル変数をコントローラーのスコープ内の変数にコピーします。

function MyCtrl($scope) {
   $scope.variable1 = variable1;
}

次に、あなたが試みたようにちょうどそれにアクセスできます。ただし、グローバル変数を変更してもこの変数は変更されないことに注意してください。それが必要な場合は、代わりにグローバルオブジェクトを使用して、それを「コピー」できます。参照によって「コピー」されるため、同じオブジェクトになり、変更が適用されます（ただし、AngularJS以外で何かを行うには、$ scope。$ applyを実行する必要があることに注意してください）。

しかし、実際に何を達成しようとしているのかを説明することは価値があるでしょう。このようなグローバル変数を使用することはほとんど決して良い考えではなく、おそらく意図した結果を得るためのより良い方法があるからです。

12
Juliane Holzt

私はこれらの方法を試しましたが、私のニーズに合わないことがわかりました。私の場合、jsonレンダリングされたサーバー側をページのメインテンプレートにインジェクトする必要がありました。そのため、ページが読み込まれangular initsになると、データは既にそこにあり、取得する必要はありません（大きなデータセット）。

私が見つけた最も簡単な解決策は、以下を行うことです：

アプリの外部のangularコードで、モジュールとコントローラーの定義はグローバルjavascript値を追加します。この定義は、angularのものが定義される前に行わなければなりません。

例：

'use strict';

//my data variable that I need access to.
var data = null;

angular.module('sample', [])

次に、コントローラーで：

.controller('SampleApp', function ($scope, $location) {

$scope.availableList = [];

$scope.init = function () {
    $scope.availableList = data;
}

最後に、すべてを初期化する必要があります（順序が重要です）。

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="/path/to/your/angular/js/sample.js"></script>
  <script type="text/javascript">
      data = <?= json_encode($cproducts); ?>
  </script>

最後に、コントローラーと初期化関数を初期化します。

  <div ng-app="samplerrelations" ng-controller="SamplerApp" ng-init="init();">

これにより、グローバル変数に詰め込んだデータにアクセスできるようになります。

1
MediaGiantDesign