link - directivas angularjs

Angularjs-$ rootScope en la función de enlace de directivas

Question

Estoy haciendo esta pregunta porque no tengo muy claro cómo pensar en el rootscope como una dependencia que pasa a las directivas

Tengo una directiva que necesita mostrar cierta información de $ rootScope ...

Pensé que necesitaba pasar el $ rootScope a una directiva, pero cuando escribo una directiva como esta parece funcionar.

.directive("myBar", function () {
 return {
    restrict: "E",
    transclude: true,
    replace: true,
    template:   ''<div>'' + 
                ''<span ng-transclude></span>'' + 
                ''{{rsLabels.welcome}} {{rsUser.firstName}}!'' + 
                ''</div>''
}
})

¿Cuándo debo hacer esto?

.directive("myBar", function ($rootScope) {
 return {
    restrict: "E",
    transclude: true,
    replace: true,
    template:   ''<div>'' + 
                ''<span ng-transclude></span>'' + 
                ''{{rsLabels.welcome}} {{rsUser.firstName}}!'' + 
                ''</div>''
}
})

¿Puedo y CÓMO uso rootScope si lo necesito en la función de enlace de la directiva , o debería hacerlo en el controlador de la directiva?

.directive("myBar", function ($rootScope) {
 return {
    restrict: "E",
    transclude: true,
    replace: true,
    link: function (scope, element, attrs, rootScope) {
        rootScope.rsUser = { firstName: ''Joe'' };
        rootScope.rsUser = { welcome: ''Welcome'' };
    },
    template:   ''<div>'' + 
                ''<span ng-transclude></span>'' + 
                ''{{rsLabels.welcome}} {{rsUser.firstName}}!'' + 
                ''</div>''
}
})

Mis datos de rootScope están definidos en la función de ejecución

 .run(function ($rootScope) {

  $rootScope.rsLabels = { 
      welcome: ''Welcome''
  };

  $rootScope.rsUser = { 
     firstName: ''Joe''
  };
});

¡Gracias!

Answer 1

A veces tengo que usar $ scope. $ Root:

app.directive(''setOrdinal'', function() {
  return {
    link: function($scope, $element, $attr) {

      var steps = $scope.$root.steps;

      $scope.$watch(setOrdinal, function(value) {
        if (value)
        {
          // steps code here
        }
      });
    }
  };
});

app.controller(''stepController'', [''$scope'', ''$rootScope'', ''GetSteps'', function ($scope, $rootScope, GetSteps) {
  var s = $scope;
  var r = $rootScope;

  s.initialize = function(id)
  {
    GetSteps.get({id: id}, function(resp){
      r.steps = resp.steps;
    });
  };
}]);

Answer 2

Desde mis experimentos / experiencia, parece que como todos los $ scopes finalmente heredan de $ rootScope, podrá acceder a los datos en él sin solicitarlo como un servicio, siguiendo las reglas estándar de herencia prototípica de JavaScript. Si fueras a establecer la propiedad de alcance en tu directiva en falso o {}, encontrarás que ya no puedes acceder a ella.

.directive("myBar", function($rootScope) {
    return {
        restrict: "E",
        scope: { /* Isolate scope, no $rootScope access anymore */ },
        transclude: true,
        replace: true,
        template: ''<div>'' + 
                  ''<span ng-transclude></span>'' + 
                  ''{{rsLabels.welcome}} {{rsUser.firstName}}!'' + 
                  ''</div>''
    };
});

Ejemplo: http://jsbin.com/bequy/1/edit

Answer 3

Después de trabajar mucho en esta misma cuestión durante bastante tiempo, pensé que valía la pena señalar algo que se descuidó en la primera publicación. Aquí está mi código original:

app.directive(''countrymap'', function() 
{
    return {
        link: function(scope, element, attrs) {
            scope.$watch("countryMap", function (newCountry, oldCountry) 
            {
                setTimeout( function() 
                {
                    //function body here    
                }, 100);
            })
        }
    };  
}]);

Además de la cuestión del diseño más filosófico de si debería o no usar $ rootScope, hay una cosa descaradamente mal con mi código anterior que siento que se quedó fuera de la solución de Mike: la referencia a $ rootScope. Si eres como yo y has segregado tus archivos de directivas y controladores, deberás modificar tu código de la siguiente manera:

app.directive(''countrymap'', [''$rootScope'', function($rootScope) 
{
    return {
        link: function(scope, element, attrs) {
            $rootScope.$watch("countryMap", function (newCountry, oldCountry) 
            {
                setTimeout( function() 
                { 
                    //function body here
                }, 100);
            })
        }
    };  
}]);

Sin embargo, todavía hay una pregunta más persistente: ¿puedo lograr el mismo objetivo sin hacer referencia a $ rootScope en la directiva? De hecho, puedes. Debe transmitir el cambio a la propiedad $ rootScope para que todos los ámbitos secundarios conozcan el cambio y estén atentos a este cambio en la directiva.

Controlador:

$rootScope.countryMap = ''thiscountry_map'';
$rootScope.$broadcast( "countryMapChanged", $rootScope.countryMap );

Directiva:

app.directive(''countrymapalt'', [function() 
{
    return {
        link: function(scope, element, attrs) {
            scope.$on("countryMapChanged", function(event, map) 
            {
                setTimeout( function() 
                { 
                    //function body here
                }, 100);
            })
        }
    };  
}]);

Answer 4

No se recomienda usar el alcance raíz para establecer y obtener propiedades en su aplicación angular. Intente utilizar $ cacheFactory, ya que de esa manera también puede almacenar en caché algunos valores en varias solicitudes. ( $ cacheFactory docs )

Answer 5

Otra forma es crear un servicio y lanzar ese servicio al $ rootScope y otras funciones. Lo hice así por mi entorno ...

app.service(''myService'', function ($rootScope) 
{
    this.removeItem = function (el) 
    {
       console.log(''rootScope: '',$rootScope);
       return true;
    }
});


app.directive(''draggable'', function($document,myService) 
{
   return function(scope, element, attr) 
   {
        myService.removeItem({id:1})
   }
});

Si puedes, la mejor manera es la solución de Mike. si no, prueba mi solución.

Answer 6

Puedes hacerlo de esta manera:

{{$root.rsLabels.welcome}}