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

Question

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

angularJS組み込み指令の事前定義されたjsグローバル変数にアクセスする方法は？

は例えば、私はその後、私はAngularJSディレクティブを書く

<script>var variable1 = true; </script>でこの変数を定義します。

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

これは実際に動作しません。その後

私はng-init

は、だから私は次のようにどこかのコードを書いて使用する必要があることを知らされています：...

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

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

これを行う特別な方法はありますか？

Answer 1

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

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

Answer 2

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

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

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

しかし、実際に達成しようとしていることを記述することは価値があるかもしれません。このようなグローバル変数を使用することは、決して良い考えではないので、意図した結果を得るためのより良い方法があるかもしれません。

Answer 3

。私の場合は、jsonレンダリングされたサーバー側をページのメインテンプレートに挿入する必要があったため、データがロードされ角度が変化すると、データは既にそこにあり、取得する必要はありませんでした（大きなデータセット）。

私が見つけた最も簡単な解決策は、次の操作を実行することです：あなたの角度のコードで

アプリの外、モジュールおよびコントローラの定義はグローバルJavaScriptの価値を追加 - 角度のものがある前に、この定義は来なければなりません定義された。

例：お使いのコントローラで次に

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

最後に、あなたはすべてのもの（順序が重要）をinitにする必要があります。

<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> 

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

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

これにより、グローバル変数に格納されたデータにアクセスできるようになりました。