격리 범위를 사용하면 지시문의 템플릿이 제어기 ( ‘Ctrl’) $ rootScope 변수에 액세스 할 수없는 것처럼 보이지만 지시문의 제어기에는 나타납니다. 컨트롤러 ( ‘Ctrl’) $ scope 변수가 격리 범위에 표시되지 않는 이유를 이해합니다.
HTML :
<div ng-app="app">
<div ng-controller="Ctrl">
<my-template></my-template>
</div>
<script type="text/ng-template" id="my-template.html">
<label ng-click="test(blah)">Click</label>
</script>
</div>
자바 스크립트 :
angular.module('app', [])
.controller('Ctrl', function Ctrl1($scope, $rootScope) {
$rootScope.blah = 'Hello';
$scope.yah = 'World'
})
.directive('myTemplate', function() {
return {
restrict: 'E',
templateUrl: 'my-template.html',
scope: {},
controller: ["$scope", "$rootScope", function($scope, $rootScope) {
console.log($rootScope.blah);
console.log($scope.yah);,
$scope.test = function(arg) {
console.log(arg);
}
}]
};
});
격리 범위없이 변수에 액세스합니다. 격리 범위 줄에 주석을 달면 알 수 있습니다.
// scope: {},
답변
이 방법을 사용하여 시도 할 수 있습니다. $root.blah
HTML
<label ng-click="test($root.blah)">Click</label>
자바 스크립트
angular.module('app', [])
.controller('Ctrl', function Ctrl1($scope, $rootScope) {
$rootScope.blah = 'Hello';
$scope.yah = 'World'
})
.directive('myTemplate', function() {
return {
restrict: 'E',
templateUrl: 'my-template.html',
scope: {},
controller: ["$scope", "$rootScope", function($scope, $rootScope) {
console.log($rootScope.blah);
console.log($scope.yah);
$scope.test = function(arg) {
console.log(arg);
}
}]
};
});
답변
일반적으로 $rootScope
컨트롤러와 지시문간에 공유해야하는 값을 저장 하는 데 사용하지 않아야 합니다. JS에서 전역을 사용하는 것과 같습니다. 대신 서비스를 사용하십시오.
상수 (또는 값 … 사용이 유사 함) :
.constant('blah', 'blah')
https://docs.angularjs.org/api/ng/type/angular.Module
공장 (또는 서비스 또는 제공 업체) :
.factory('BlahFactory', function() {
var blah = {
value: 'blah'
};
blah.setValue = function(val) {
this.value = val;
};
blah.getValue = function() {
return this.value;
};
return blah;
})
다음 중 하나를 사용하는 방법을 보여주는 Fiddle 포크입니다.
답변
1) $scope
컨트롤러 Ctrl과 지시문 컨트롤러 의 격리 범위 때문에 동일한 범위를 참조하지 않습니다 -Ctrl 에 scope1 이 있고 지시문에 scope2 가 있다고 가정 해 봅시다 .
2) 격리 범위 scope2 때문에 프로토 타입 적으로 상속 하지 않습니다$rootScope
. 따라서 정의 $rootScope.blah
하면 scope2 에서 볼 수 있습니다 .
3) 디렉티브 템플릿에서 액세스 할 수있는 것은 scope2입니다.
요약하면 여기에 상속 스키마가 있습니다.
_______|______
| |
V V
$rootScope scope2
|
V
scope1
$rootScope.blah
> "Hello"
scope1.blah
> "Hello"
scope2.blah
> undefined
답변
나는 이것이 오래된 질문이라는 것을 알고 있습니다. 그러나 격리 된 범위가 $ rootscope의 속성에 액세스 할 수없는 이유에 대한 내 질문을 만족시키지 못했습니다.
그래서 나는 각도 lib를 파고 발견했습니다.
$new: function(isolate) {
var ChildScope,
child;
if (isolate) {
child = new Scope();
child.$root = this.$root;
child.$$asyncQueue = this.$$asyncQueue;
child.$$postDigestQueue = this.$$postDigestQueue;
} else {
if (!this.$$childScopeClass) {
this.$$childScopeClass = function() {
// blah blah...
};
this.$$childScopeClass.prototype = this;
}
child = new this.$$childScopeClass();
}
이것은 새로운 스코프가 생성 될 때마다 angular가 호출하는 함수입니다. 여기서 격리 된 스코프가 프로토 타입 적으로 루트 스코프를 상속하지 않는다는 것이 분명합니다. 대신 rootscope 만 새 범위에서 속성 ‘$ root’로 추가됩니다. 따라서 새로운 격리 된 범위의 $ root 속성에서만 rootscope의 속성에 액세스 할 수 있습니다.