С изолированной областью видимости шаблон директивы, похоже, не может получить доступ к переменной контроллера ('Ctrl') $ rootScope, которая, однако, присутствует в контроллере директивы. Я понимаю, почему переменная $ scope контроллера ('Ctrl') не видна в изолированной области.
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>
JavaScript:
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: {},
javascript
angularjs
angularjs-directive
camden_kid
источник
источник
directive('myTemplate', function($rootScope) { ... })
?Ответы:
Вы можете попробовать этот выход, используя
$root.blah
Рабочий код
html
<label ng-click="test($root.blah)">Click</label>
javascript
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 и контроллер директивы не относятся к одной и той же области - допустим, у нас есть область действия 1 в Ctrl и область 2 в директиве.2) Из-за изолированного объема 2 прототипно не наследуется от
$rootScope
; поэтому, если вы определите,$rootScope.blah
нет никаких шансов, что вы сможете увидеть это в scope2 .3) В шаблоне директивы вы можете получить доступ к scope2
Если резюмировать, вот схема наследования
_______|______ | | V V $rootScope scope2 | V scope1 $rootScope.blah > "Hello" scope1.blah > "Hello" scope2.blah > undefined
источник
Я знаю, что это старый вопрос. Но это не удовлетворило мою инквизицию о том, почему изолированная область не сможет получить доступ к свойствам в $ rootcope.
Итак, я покопался в angular 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 всякий раз, когда создается новая область видимости. Здесь ясно, что любая изолированная область видимости не наследует прототипом rootcope. скорее только корневая область добавляется как свойство «$ root» в новую область. Таким образом, мы можем получить доступ к свойствам rootcope только из свойства $ root в новой изолированной области.
источник