AngularJS yönergesinde global js değişkenine nasıl erişilir

Question

Her şeyden önce, kontrol ettim ve sorumu kapsayan bir makale bulamadım.

AngularJS yerleşik yönergesinde önceden tanımlanmış js global değişkenine nasıl erişilir?

Örneğin, ben Sonra bir angularjs yönergesi yazmak

<script>var variable1 = true; </script> bu değişken tanımlamak:

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

Bu gerçekten çalışmıyor. Sonra

ben ng-init

yüzden gibi başka bir yerde kod yazdım kullanması gerektiğini haberdar ediyorum: ...

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

Ve bu görünüşte de çalışmaz bu gibi kısır döngü. Ön tanımlı js global değişkenlere erişmeniz gerekiyor, ardından ng-init kullanmanız gerekiyor; ng-init kullanmak için global değişkenlere erişmeniz gerekir.

Bunu yapmak için herhangi bir yol var mı?

Answer 1

AngularJS'de bunun nasıl doğru yapıldığını gösteren bir working CodePen example oluşturdum. Açısal $window service, tüm global nesnelere erişmek için kullanılmalıdır, çünkü doğrudan window'a erişilmesi testi daha zor hale getirir.

HTML:

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

JavaScript: Ben bu yöntemleri denenmiş ve onlar benim ihtiyaçları için dont'iş bulmak var

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

Genel değişkeni denetleyicinizin kapsamındaki bir değişkene kopyalayın. Eğer çalışmış gibi

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

Sonra sadece erişebilirsiniz. Ancak, global değişkeni değiştirdiğinizde bu değişkenin değişmeyeceğini unutmayın. Buna ihtiyacınız varsa, bunun yerine global bir nesne kullanabilir ve bunu "kopyalayabilirsiniz". Referans olarak "kopyalanacağı" için, aynı nesne olacaktır ve bu nedenle değişiklikler uygulanacaktır (ancak AngularJS dışında bir şeyler yapmanın $ kapsamı yapmanız gerekeceğini unutmayın. $ Anway'i uygulayın).

Ama gerçekte neyi başarmaya çalıştığınızı tarif ederseniz, buna değer olabilir. Bunun gibi küresel bir değişken kullanmak neredeyse hiç iyi bir fikir değildir ve muhtemelen hedeflenen sonuca ulaşmak için daha iyi bir yol vardır.

Answer 3

. Benim durumumda, json'un sunucu tarafını sayfanın ana şablonuna enjekte etmem gerekiyordu, bu yüzden yükler ve açısal girişler olduğunda, veriler zaten var ve alınmak zorunda değil (büyük veri kümesi). - açısal şeyler önce bu tanım gelmelidir uygulaması, modül ve denetleyici tanımları küresel javascript değer katmak dışında sizin açısal kodunda

: Ben bulduk

kolay çözüm şunları yapmaktır tanımladı.

Örnek:

'use strict'; 

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

angular.module('sample', []) 

Sonra denetleyicisi:

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

Nihayet kontrolörü ve init başlatmak: Son olarak

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

$scope.availableList = []; 

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

, her şeyi (emir konularda) init zorunda işlevi.

Bunu yaparak, global değişkende doldurduğunuz her hangi bir veriye erişebileceksiniz.