Acceso a los padres aislados al alcance de la Directiva -- javascript campo con html campo con angular.js camp codereview Relacionados El problema

Accessing parent isolated scope in directive


4
vote

problema

Español

Estaba buscando una forma de marcar partes de mi aplicación como restringido a solo ciertos roles, de forma de elementos.

Esto funciona bastante bien, utilizando una directiva de atributos, donde especifico los roles permitidos y deshabilita / oculta el elemento correspondiente; p.ej.

  <input require-role="admin" />   

Para que la aplicación sea más mantenible, pensé en heredar el atributo de rol requerido, por ejemplo.

  <form>     <div required-role="Admin">              <!-- Set:       'Admin' -->         <input required-role/>               <!-- Inherit:   'Admin' -->         <input required-role/>               <!-- Inherit:   'Admin' -->         <input required-role/>               <!-- Inherit:   'Admin' -->         <input required-role/>               <!-- Inherit:   'Admin' -->         <input />                            <!-- No role checking  -->         <div required-role="User">           <!-- Overwrite: 'User' -->             <input required-role/>           <!-- Inherit:   'User' -->         </div>     </div>                                      <div required-role="Admin User">         <!-- Set:   'Admin User' -->                  <input required-role/>               <!-- Inherit:   'Admin User' -->         <input required-role/>               <!-- Inherit:   'Admin User' -->         <input required-role/>               <!-- Inherit:   'Admin User' -->         <input required-role="Admin"/>       <!-- Overwrite: 'Admin' -->     </div>     <button required-role="Admin">Save</button>     <button required-role="User">Send to review</button> </form>   

Lo que acumulé es la siguiente directiva, que busca recursivamente en el elemento isolatedScope hasta que finalmente encuentra el 9988776665544334 Propiedad:

  var app = angular.module('plunker', []);  app.controller('MainCtrl', function($scope){   $scope.name = 'World'; }); app.directive('requireRole', function(){   var getRequiredRoleFromParent = function(element){     var par = element.parent();     if (!par) return;     var is = par.isolateScope();     if (is && is.requireRole) return is.requireRole;     return getRequiredRoleFromParent(par);   };   return {     restrict: 'A',     scope   : {       requireRole: '@'     },     link    : function(scope, element){       var labelClass = "label-success";       if (!scope.requireRole) {         scope.requireRole = getRequiredRoleFromParent(element);         labelClass = "label-info";       }       element.prepend('<span class="label ' + labelClass + ' ">' + scope.requireRole + '</span>');     }   } });   

Estoy contento con la solución con la que se me ocurrió, pero mi experiencia en desarrollo de las directivas es limitada; Tal vez hay mejores maneras de lograr el mismo comportamiento?

PLUNKR se puede encontrar aquí

Original en ingles

I was looking for a way to markup parts of my app as restricted to only certain roles, on an element basis.

This works quite well, using an attribute directive, where I specify the allowed roles and disable/hide the corresponding element; e.g.

<input require-role="admin" /> 

In order to make the app more maintainable I thought about inheriting the the required role attribute, e.g.

<form>     <div required-role="Admin">              <!-- Set:       'Admin' -->         <input required-role/>               <!-- Inherit:   'Admin' -->         <input required-role/>               <!-- Inherit:   'Admin' -->         <input required-role/>               <!-- Inherit:   'Admin' -->         <input required-role/>               <!-- Inherit:   'Admin' -->         <input />                            <!-- No role checking  -->         <div required-role="User">           <!-- Overwrite: 'User' -->             <input required-role/>           <!-- Inherit:   'User' -->         </div>     </div>                                      <div required-role="Admin User">         <!-- Set:   'Admin User' -->                  <input required-role/>               <!-- Inherit:   'Admin User' -->         <input required-role/>               <!-- Inherit:   'Admin User' -->         <input required-role/>               <!-- Inherit:   'Admin User' -->         <input required-role="Admin"/>       <!-- Overwrite: 'Admin' -->     </div>     <button required-role="Admin">Save</button>     <button required-role="User">Send to review</button> </form> 

What I came up with is the following directive, that recursively searches in the isolatedScope of the parent element until it eventually finds the requiredRole property:

var app = angular.module('plunker', []);  app.controller('MainCtrl', function($scope){   $scope.name = 'World'; }); app.directive('requireRole', function(){   var getRequiredRoleFromParent = function(element){     var par = element.parent();     if (!par) return;     var is = par.isolateScope();     if (is && is.requireRole) return is.requireRole;     return getRequiredRoleFromParent(par);   };   return {     restrict: 'A',     scope   : {       requireRole: '@'     },     link    : function(scope, element){       var labelClass = "label-success";       if (!scope.requireRole) {         scope.requireRole = getRequiredRoleFromParent(element);         labelClass = "label-info";       }       element.prepend('<span class="label ' + labelClass + ' ">' + scope.requireRole + '</span>');     }   } }); 

I am happy with the solution I came up with, yet my experience developing directives is limited; maybe there are better ways to achieve the same behavior?

Plunkr can be found here

        

Lista de respuestas

1
 
vote

en su html

    <form>       <div required-role="Admin">              <!-- Set:       'Admin' -->           <input required-role/>               <!-- Inherit:   'Admin' -->           <input required-role/>               <!-- Inherit:   'Admin' -->           <input required-role/>               <!-- Inherit:   'Admin' -->           <input required-role/>               <!-- Inherit:   'Admin' -->           <input />                            <!-- No role checking  -->           <div required-role="User">           <!-- Overwrite: 'User' -->               <input required-role/>           <!-- Inherit:   'User' -->           </div>       </div>                                        <div required-role="Admin User">         <!-- Set:   'Admin User' -->                    <input required-role/>               <!-- Inherit:   'Admin User' -->           <input required-role/>               <!-- Inherit:   'Admin User' -->           <input required-role/>               <!-- Inherit:   'Admin User' -->           <input required-role="Admin"/>       <!-- Overwrite: 'Admin' -->       </div>       <button required-role="Admin">Save</button>       <button required-role="User">Send to review</button>   </form>   

Usted crea un div Solo para heredarlo, esta es una mala práctica, a menos que haya más de un elemento dentro de ese div que va a heredar de la <. Código> div

En el segundo grupo de código, en realidad lo hace de la manera correcta, no estoy seguro de por qué fue inconsistente con el primer bloque.

Deberías escribirlo así

  <form>     <div required-role="Admin">              <!-- Set:       'Admin' -->         <input required-role/>               <!-- Inherit:   'Admin' -->         <input required-role/>               <!-- Inherit:   'Admin' -->         <input required-role/>               <!-- Inherit:   'Admin' -->         <input required-role/>               <!-- Inherit:   'Admin' -->         <input />                            <!-- No role checking  -->         <input required-role="User"/>        <!-- Inherit:   'User' -->     </div>                                      <div required-role="Admin User">         <!-- Set:   'Admin User' -->                  <input required-role/>               <!-- Inherit:   'Admin User' -->         <input required-role/>               <!-- Inherit:   'Admin User' -->         <input required-role/>               <!-- Inherit:   'Admin User' -->         <input required-role="Admin"/>       <!-- Overwrite: 'Admin' -->     </div>     <button required-role="Admin">Save</button>     <button required-role="User">Send to review</button> </form>   

También asumo que este es un ejemplo HTML, ya que no le da ninguna de las etiquetas 9988776665544335 ID , lo que los hace inutilizables.


en su javascript

    var getRequiredRoleFromParent = function(element){       var par = element.parent();       if (!par) return;       var is = par.isolateScope();       if (is && is.requireRole) return is.requireRole;       return getRequiredRoleFromParent(par);   };   

Podría tomar la verificación negativa de allí, no tiene sentido de esa manera, en su lugar, realizar una verificación positiva, si es cierto, entonces puede realizar lo que es después de eso.

Las cosas "después de eso" deben cambiarse a una declaración ternaria, se ve más limpia para mí y es equivalente. Está ligeramente anidado, pero muestra el flujo del código brillantemente.

  var getRequiredRoleFromParent = function(element){     var par = element.parent();     if (par) {         var is = par.isolateScope();         return (is && is.requireRole)             ? is.requireRole             : getRequiredRoleFromParent(par);     } };   

La recursión de esta función se ve bien, no veo un problema con la naturaleza recursiva de esta función.

 

In your HTML

  <form>       <div required-role="Admin">              <!-- Set:       'Admin' -->           <input required-role/>               <!-- Inherit:   'Admin' -->           <input required-role/>               <!-- Inherit:   'Admin' -->           <input required-role/>               <!-- Inherit:   'Admin' -->           <input required-role/>               <!-- Inherit:   'Admin' -->           <input />                            <!-- No role checking  -->           <div required-role="User">           <!-- Overwrite: 'User' -->               <input required-role/>           <!-- Inherit:   'User' -->           </div>       </div>                                        <div required-role="Admin User">         <!-- Set:   'Admin User' -->                    <input required-role/>               <!-- Inherit:   'Admin User' -->           <input required-role/>               <!-- Inherit:   'Admin User' -->           <input required-role/>               <!-- Inherit:   'Admin User' -->           <input required-role="Admin"/>       <!-- Overwrite: 'Admin' -->       </div>       <button required-role="Admin">Save</button>       <button required-role="User">Send to review</button>   </form> 

You create a div just to inherit from it, this is bad practice, unless there is more than one element inside that div that is going to inherit from the div

in the second group of code you actually do it the right way, not sure why you were inconsistent with the first block.

you should write it like this

<form>     <div required-role="Admin">              <!-- Set:       'Admin' -->         <input required-role/>               <!-- Inherit:   'Admin' -->         <input required-role/>               <!-- Inherit:   'Admin' -->         <input required-role/>               <!-- Inherit:   'Admin' -->         <input required-role/>               <!-- Inherit:   'Admin' -->         <input />                            <!-- No role checking  -->         <input required-role="User"/>        <!-- Inherit:   'User' -->     </div>                                      <div required-role="Admin User">         <!-- Set:   'Admin User' -->                  <input required-role/>               <!-- Inherit:   'Admin User' -->         <input required-role/>               <!-- Inherit:   'Admin User' -->         <input required-role/>               <!-- Inherit:   'Admin User' -->         <input required-role="Admin"/>       <!-- Overwrite: 'Admin' -->     </div>     <button required-role="Admin">Save</button>     <button required-role="User">Send to review</button> </form> 

I also assume that this is Example HTML as you don't give any of those input tags ID's which makes them unusable.


In your Javascript

  var getRequiredRoleFromParent = function(element){       var par = element.parent();       if (!par) return;       var is = par.isolateScope();       if (is && is.requireRole) return is.requireRole;       return getRequiredRoleFromParent(par);   }; 

You could take the negative check out of there, it doesn't make sense that way, instead perform a positive check, if it's true then you can perform what is after that.

The "after that" stuff should be changed to a ternary statement, it looks cleaner to me and it is equivalent. It is slightly nested but it shows the flow of the code brightly.

var getRequiredRoleFromParent = function(element){     var par = element.parent();     if (par) {         var is = par.isolateScope();         return (is && is.requireRole)             ? is.requireRole             : getRequiredRoleFromParent(par);     } }; 

The Recursion of this function looks good, I don't see an issue with the recursive nature of this function.

 
 
         
         

Relacionados problema

3  Forma aceptable de usar métodos jQuery en directivas angulares  ( Acceptable way of using jquery methods in angular directives ) 
aquí es mi ejemplo de plunker de lo que estoy haciendo. jQuery es una excelente manera de usar transiciones de diapositivas y parece funcionar bien con an...

2  Manejo rechazado Respuestas HTTP con estado 401  ( Handling rejected http responses with status 401 ) 
Soy un poco nuevo para JavaScript y tengo preguntas al respecto. Ahora mi proyecto práctico se está creciendo un poco más grande. Obtuve lo siguiente si el má...

1  Devolviendo un objeto del servicio  ( Returning an object from service ) 
En términos de legibilidad, eficiencia y la mejor convención, ¿cuál de los dos es mejor? SNIPPET A: angular.module("main.loadbalancer").factory("Accoun...

22  Inicializador Simple Async Google Maps con angularjs  ( Simple async google maps initializer with angularjs ) 
Aquí está un simple reutilizable 9988776655544337 factory Me acompañé para inicializar los mapas de Google de forma asíncrona, lo que de alguna manera no ...

2  Controller.js de vehículos crud  ( Controller js of crud vehicles ) 
Nunca tomé una solicitud en una arquitectura de controlador modelo y tenemos algunas dificultades en la parte frontal. El siguiente código funciona bien, pero...

5  Juego de Trivia de AngularJS - Controlador de separación de la Directiva  ( Angularjs trivia game separating controller from directive ) 
Estoy creando un juego de trivia (propósitos puramente para aprender) usando angularjs , nodejs y mongodb. Mi preocupación está relacionada con la forma en ...

4  Estructura de archivo modular angular  ( Angular modular file structure ) 
Mi intención es separar los componentes en una base de archivos. Por ejemplo, quiero que un controlador específico tenga su propio archivo (lo mismo ocurre co...

8  Manejo del estado compartido entre muchos elementos en angular  ( Handling shared state among a lot of elements in angular ) 
Estoy trabajando en un proyecto en angular donde tengo un número de objetos de datos similares. Cuando hace clic en alguien de ellos, su estado y la cantidad ...

2  Un puerto sucio de una búsqueda de imágenes de imágenes de Google Clon Jquery Plugin a Angular JS  ( A dirty port of a google image search layout clone jquery plugin to angular js ) 
Tomé la manipulación de diseño básico de una complemento jquery llamado flexibilidad . La idea es usar la etiqueta de la directiva y encapsular una pieza de ...

7  En AngularJS, crea muchas directivas o use NG-Controller?  ( In angularjs create lots of directives or use ng controller ) 
Esta es una pregunta sobre si mi estilo de codificación sigue las mejores prácticas de AngularJS. Uno de los puntos de venta a la angular son las directivas...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos