programing

Angular에서 전역 js 변수에 액세스하는 방법JS 지시어

newstyles 2023. 3. 15. 19:28

Angular에서 전역 js 변수에 액세스하는 방법JS 지시어

우선 확인해보니 내 질문을 다룬 기사는 없었다.

angular에서 미리 정의된 js 전역 변수에 액세스하는 방법JS 기본 제공 지시문?

예를 들어, 이 변수는<script>var variable1 = true; </script>

그리고 나는 Angular를 쓴다.JS 지시:

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

이건 별로 효과가 없어요.

그리고 나서 나는 내가 그것을 사용해야 한다고 들었다.ng-init

그래서 다른 곳에 코드를 썼습니다.

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

그리고 이것 또한 효과가 없는 것 같습니다...이건 악순환과도 같아요미리 정의된 js 글로벌 변수에 액세스하여 ng-init을 사용해야 합니다.ng-init을 사용하려면 글로벌 변수에 액세스해야 합니다.

이 일을 하는 특별한 방법이 있나요?

AngularJS에서 올바른 방법으로 작업하는 CodePen의 예를 작성했습니다.Angular $window 서비스는 직접 액세스하기 때문에 모든 글로벌 개체에 액세스하기 위해 사용해야 합니다.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;
}]);

글로벌 변수를 컨트롤러 스코프 내의 변수에 복사합니다.

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

그러면 시도했던 대로 접속할 수 있습니다.단, 글로벌 변수를 변경해도 이 변수는 변경되지 않습니다.필요한 경우 글로벌 개체를 사용하여 해당 개체를 "복사"할 수 있습니다.참조에 의해 「복사」되기 때문에, 같은 오브젝트가 되어, 변경이 적용됩니다(단, Angular 이외의 작업을 실시하는 것에 주의해 주세요).JS에서는 $scope를 수행해야 합니다.$140 anway).

하지만 당신이 실제로 성취하려고 하는 것을 묘사해 준다면 가치가 있을 것이다.왜냐하면 이와 같은 글로벌 변수를 사용하는 것은 좋은 생각이 아니며 의도한 결과를 얻을 수 있는 더 좋은 방법이 있을 수 있기 때문입니다.

이 방법을 시도해 본 결과, 제 요구에 맞지 않는 것을 알 수 있었습니다.제 경우 페이지의 메인 템플릿에 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;
}

마지막으로 모든 것을 초기화해야 합니다(주문 중요).

  <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();">

이렇게 하면 글로벌 변수에 삽입한 모든 데이터에 액세스할 수 있습니다.

언급URL : https://stackoverflow.com/questions/19383725/how-to-access-global-js-variable-in-angularjs-directive