내 HTML에서 rootScope 변수 사용
따라서 다음과 같이 각도 HTML에서 범위 변수를 쉽게 사용할 수 있습니다.
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
예를 들면 다음과 같습니다.
<h1>Hello {{yourName}}!</h1>
yourName내가 원하는 범위에서 사용 하고 있습니다.
<h1>Hello {{yourName}} you are in in {{$rootScope.zoneName}}!</h1>
$rootScope이와 같이 변수 를 가져올 수 있습니까?
$rootScopehtml 로 지정할 필요가 없습니다 . $scope변수 를 사용하는 것과 같은 방식으로 사용할 수 있습니다.
에서 업데이트
<h1>Hello {{yourName}} you are in in {{$rootScope.zoneName}}!</h1>
...에
<h1>Hello {{yourName}} you are in in {{zoneName}}!</h1>
이것은 작동합니다.
<h1>Hello {{yourName}} you are in in {{$root.zoneName}}!</h1>
$rootScope컨트롤러에 삽입 한 다음 다음과 같은 범위 변수에 매핑 할 수 있습니다.
$scope.global = $rootScope;
그런 다음 템플릿에서 사용할 수 있습니다.
<p>$rootscope value of name is {{ global.name }}.</p>
$rootScope코드를 변조하는 것이 모범 사례로 간주 되지 않으므로 쓸모없는 일을에 넣지 않도록주의 해야합니다.
나는 이것이 늦다는 것을 알고 있지만 좋은 설명이 필요합니다!
의 모든보기 각도 1.x에서 세계는 새로운 자동 기본적으로해야합니다 $ 범위 등 $ 범위가 호출 된 것을에서 연장됩니다 $의 rootScope 지역 있도록 $ 범위가 것을 모든 상속 $ rootScope가 저장됩니다 그것은 자신의 버전의 것 그 데이터의.
따라서 $ rootScope 수준에 정보 가있는 경우 기본적으로 정보가 있으므로보기에서 일반적인 보간을 사용하여 직접 액세스 할 수 있습니다.
이 코드 줄은 그 방법도 보여줄 것입니다!
var app = angular.module('plunker', []);
app.run(function($rootScope) {
$rootScope.persons = [
{
name : "Houssem",
role : "Developer Advocate"
},
{
name: "Clark",
role: "Developer"
}
];
})
app.controller('MainCtrl', function($scope) {
$scope.greetings = 'Hello World !';
});
그리고 이것은 색인 페이지에 있습니다.
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.0.x" src="https://code.angularjs.org/1.0.8/angular.js" data-semver="1.0.8"></script>
<script data-require="ui-router@1.0.0-alpha.5" data-semver="1.0.0-alpha.5" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-alpha.5/angular-ui-router.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>{{greetings}}</p>
<ul>
<li ng-repeat="person in persons">
<p>{{person.name}} - {{person.role}}</p>
</li>
</ul>
</body>
</html>
그리고 이것을 설명하는 This Plunker 를 확인하십시오 !
참고URL : https://stackoverflow.com/questions/31707789/use-rootscope-variables-in-my-html
'Development Tip' 카테고리의 다른 글
| NULL 값을 테이블 끝에 정렬 (0) | 2020.10.25 |
|---|---|
| gem의 프록시 서버를 어떻게 설정할 수 있습니까? (0) | 2020.10.25 |
| 모의 및 단위 테스트에 필요할 때 SqlException을 던지는 방법은 무엇입니까? (0) | 2020.10.25 |
| Node.js : ImageMagick없이 이미지 크기 조정 (0) | 2020.10.25 |
| 호스트 외부 (동일 네트워크)에서 도커 컨테이너에 연결하는 방법 [Windows] (0) | 2020.10.25 |