Estructurar un componente angular reutilizable con múltiples directivas de comunicación -- javascript campo con angular.js camp codereview Relacionados El problema

Structuring a reusable angular component with multiple communicating directives


3
vote

problema

Español

Tengo un json anidado de múltiples niveles. El último nivel tiene los "datos de la serie" que se agregarán a las opciones de althicarts para representar los datos del gráfico de interés.

Estoy olfateando al JSON y poblando las opciones en cada nivel que se establece como un modelo observado en el controlador y modificando los datos del gráfico, que se observa dentro de la directiva y el gráfico actualizado sobre el cambio de estos modelos.

Estoy buscando estructurar esto como un componente reutilizable y preguntándose en la mejor práctica para hacerlo. Me parece que, la parte "Selección de JSON" y la parte "Renderización de la tabla" pueden ser mejores como sus propias directivas que se comunican entre sí.

¿Concurtas o sugieras un enfoque alternativo?

controlador:

  app.controller('MyCtrl',function($scope,Data,ForwardChart){     http.get('scripts/lib/bds2.json').success(function(api_data){         $scope.r_api_data = api_data.res;          var available_options = [];         var chosen_options= [];         var current_json = $scope.r_api_data;         for (var i=0; i<2; i++){             var json_options = _.keys(current_json);             available_options.push(json_options);             chosen_options.push(json_options[0]);              current_json = current_json[json_options[0]];         }          $scope.plot_data = function(){             var bdfs_chart = {                 series : Data.get_serieses($scope.r_api_data,$scope.chosen_options)             };             $scope.bdfs_chart = $.extend(true,angular.copy(ForwardChart),bdfs_chart);         };          $scope.chosen_options = [];         $scope.available_options = available_options;          $scope.$watch('chosen_options', function(){             $scope.plot_data();         },true);          $scope.chosen_options = chosen_options;     }) });   

Directiva:

  app.directive('intchart', function(){     return {         restrict: 'E',         template: '<div class="hc-bars"></div>',         scope: {             chartData: "=chartId"         },          link: function(scope, element, attrs){             var chartsDefaults = {                 chart: {                     renderTo: element[0],                     type: attrs.type || null,                     height: attrs.height,                     width: attrs.width                 },                 colors: attrs.color.split(",")             };             var chart = {};             scope.$watch(function() { return scope.chartData; }, function(value){                 var chart_json = {};                 if (chart.hasOwnProperty('series') && chart.series.length>0){                     for (var i = 0; i < value.series.length; i++) {                         chart.series[i].setData(value.series[i].data);                     }                 } else{                     $.extend(true, chart_json, chartsDefaults, value);                     chart = new Highcharts.Chart(chart_json);                 }             }, true);         }     } })   
Original en ingles

I have a nested JSON of multiple levels. The last level has the "series data" that is to be added to the highcharts options to render the chart data of interest.

I am sniffing the JSON and populating the options in each level which is set as a watched model in the controller and modifying the chart data, which is watched inside of the directive and chart updated on the change of these models.

I am looking to structure this as a reusable component and wondering on the best practice to do so. Seems to me, the "JSON selection" part and the "chart rendering" part can be best as their own directives that communicate amongst each other.

Do you concur or suggest an alternative approach?

Controller:

app.controller('MyCtrl',function($scope,Data,ForwardChart){     http.get('scripts/lib/bds2.json').success(function(api_data){         $scope.r_api_data = api_data.res;          var available_options = [];         var chosen_options= [];         var current_json = $scope.r_api_data;         for (var i=0; i<2; i++){             var json_options = _.keys(current_json);             available_options.push(json_options);             chosen_options.push(json_options[0]);              current_json = current_json[json_options[0]];         }          $scope.plot_data = function(){             var bdfs_chart = {                 series : Data.get_serieses($scope.r_api_data,$scope.chosen_options)             };             $scope.bdfs_chart = $.extend(true,angular.copy(ForwardChart),bdfs_chart);         };          $scope.chosen_options = [];         $scope.available_options = available_options;          $scope.$watch('chosen_options', function(){             $scope.plot_data();         },true);          $scope.chosen_options = chosen_options;     }) }); 

Directive:

app.directive('intchart', function(){     return {         restrict: 'E',         template: '<div class="hc-bars"></div>',         scope: {             chartData: "=chartId"         },          link: function(scope, element, attrs){             var chartsDefaults = {                 chart: {                     renderTo: element[0],                     type: attrs.type || null,                     height: attrs.height,                     width: attrs.width                 },                 colors: attrs.color.split(",")             };             var chart = {};             scope.$watch(function() { return scope.chartData; }, function(value){                 var chart_json = {};                 if (chart.hasOwnProperty('series') && chart.series.length>0){                     for (var i = 0; i < value.series.length; i++) {                         chart.series[i].setData(value.series[i].data);                     }                 } else{                     $.extend(true, chart_json, chartsDefaults, value);                     chart = new Highcharts.Chart(chart_json);                 }             }, true);         }     } }) 
     
   
   

Lista de respuestas

1
 
vote

Es difícil decirlo de estos fragmentos exactamente lo que está tratando de lograr, pero creo que las preguntas que tiene que preguntar son; ¿Cómo anticipas la reutilización de este código? Si la reutilización es la característica, ¿cuáles son los casos de uso?

Si anticipa que necesita múltiples controladores distintos con un subconjunto significativo y coherente de la lógica en la solicitud de obtención en el controlador, considere extraerlo en un servicio, para guardar la duplicación lógica.

Alternativamente, si los contenidos del controlador solo son necesarios para la directiva, considere realizar la parte controladora de la directiva, en lugar de requerir que se usen correctamente en conjunto.

La directiva se ve bien de lo que puedo decir.

 

It's difficult to tell from these snippets exactly what you're trying to achieve, but I think the questions you have to ask are; how do you anticipate reusing this code? If reusability is the feature, what are the use cases?

If you anticipate needing multiple distinct controllers with a significant and coherent subset of the logic in the get request in the controller, the consider extracting it into a service, to save logic duplication.

Alternatively, if the contents of the controller are only needed for the directive, consider making the controller part of the directive, rather than requiring them to be correctly used in conjunction.

The directive looks good from what I can tell.

 
 

Relacionados problema

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...

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á...

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 ...

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 ...

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...

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 ...

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...

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 ...

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...

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...




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