¿Por qué no se puede acceder a $ rootScope en la plantilla de una directiva con alcance aislado?

Con alcance aislado, la plantilla de la directiva no parece poder acceder al controlador ('Ctrl') $ rootScope variable que, sin embargo, aparece en el controlador de la directiva. Entiendo por qué la variable $ scope del controlador ('Ctrl') no es visible en el ámbito aislado.

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

JSFiddle

Se accede a la variable sin alcance aislado, como se puede ver al comentar la línea de alcance aislado:

        // scope: {},

Puedes probar esta forma usando $root.blah

Código de trabajo

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

Generalmente, debe evitar usar $rootScopepara almacenar valores que necesita compartir entre controladores y directivas. Es como usar globales en JS. Utilice un servicio en su lugar:

Una constante (o valor ... el uso es similar):

.constant('blah', 'blah')

https://docs.angularjs.org/api/ng/type/angular.Module

Una fábrica (o servicio o proveedor):

.factory('BlahFactory', function() {
    var blah = {
        value: 'blah'
    };

    blah.setValue = function(val) {
      this.value = val;
    };

    blah.getValue = function() {
        return this.value;
    };

    return blah;
})

Aquí hay una bifurcación de su Fiddle que demuestra cómo puede usar

1) Debido al alcance aislado $scopeen su controlador, Ctrl y en la directiva, el controlador no se refieren al mismo alcance; digamos que tenemos alcance1 en Ctrl y alcance2 en la directiva.

2) Debido al alcance aislado, scope2 no hereda de manera prototípica $rootScope; por lo que si define $rootScope.blahno hay posibilidad de que pueda verlo en scope2 .

3) A lo que puede acceder en su plantilla de directiva es scope2

Si lo resumo, aquí está el esquema de herencia

    _______|______
    |            |
    V            V
$rootScope     scope2
    |
    V
  scope1


$rootScope.blah
> "Hello"
scope1.blah
> "Hello"
scope2.blah
> undefined

Sé que esta es una vieja pregunta. Pero no satisfizo mi pregunta sobre por qué el alcance aislado no podrá acceder a las propiedades en $ rootscope.

Así que cavé en la biblioteca angular y encontré:

$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();
  }

Esta es la función llamada por angular cada vez que se crea un nuevo alcance. Aquí está claro que cualquier endoscopio aislado no hereda prototípicamente el radioscopio. más bien, solo se agrega el alcance raíz como una propiedad '$ root' en el nuevo alcance. Por lo tanto, solo podemos acceder a las propiedades de rootscope desde la propiedad $ root en el nuevo alcance aislado.