Como acessar a variável global js na diretiva AngularJS

Primeiro de tudo, eu verifiquei e não encontrei nenhum artigo cobrindo a minha pergunta.

Como acessar uma variável global js predefinida na diretiva integrada angularJS?

Por exemplo, eu defino essa variável em var variable1 = true; var variable1 = true;

Então eu escrevo uma diretiva AngularJS:

Show some hidden stuff!

Isso realmente não funciona.

Então sou informado que devo usar o ng-init

Então escrevi código em outro lugar como:

E isso aparentemente não funciona tão bem … isso é como um ciclo vicioso. Você precisa acessar variables ​​globais js pré-definidas, então você precisa usar o ng-init; Para usar o ng-init, você precisa acessar variables ​​globais.

Alguma maneira particular de fazer isso?

Eu criei um exemplo CodePen de trabalho demonstrando como fazer isso da maneira correta no AngularJS. O serviço de janela Angular $ deve ser usado para acessar qualquer object global, pois a window access direto torna o teste mais difícil.

HTML:

 
Value of global variable read by AngularJS: {{variable1}}

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

Copie a variável global para uma variável no escopo no seu controlador.

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

Então você pode simplesmente acessá-lo como você tentou. Mas observe que essa variável não será alterada quando você alterar a variável global. Se você precisar disso, você poderia usar um object global e “copiar” isso. Como ele será “copiado” por referência, será o mesmo object e, portanto, as alterações serão aplicadas (mas lembre-se de que fazer coisas fora do AngularJS exigirá que você faça $ scope. $ Apply anway).

Mas talvez valesse a pena se você descrever o que você realmente tenta alcançar. Porque usar uma variável global como essa quase nunca é uma boa ideia e provavelmente há uma maneira melhor de chegar ao resultado pretendido.

Eu tentei esses methods e descobri que eles não funcionam para as minhas necessidades. No meu caso, eu precisava injetar o lado do servidor json renderizado no template principal da página, então quando ele carrega e inits angulares, os dados já estão lá e não precisam ser recuperados (grandes datasets).

A solução mais fácil que encontrei é fazer o seguinte:

Em seu código angular fora do aplicativo, as definições do módulo e do controlador são adicionadas em um valor global de javascript – essa definição DEVE vir antes que o material angular seja definido.

Exemplo:

 'use strict'; //my data variable that I need access to. var data = null; angular.module('sample', []) 

Então no seu controlador:

 .controller('SampleApp', function ($scope, $location) { $scope.availableList = []; $scope.init = function () { $scope.availableList = data; } 

Finalmente, você tem que iniciar tudo (a ordem é importante):

     

Por fim, inicialize seu controlador e a function init.

  

Ao fazer isso, você terá access a todos os dados armazenados na variável global.