Tengo una estructura de navegación de varios niveles que produce la navegación superior:
[ {id: 1, label: 'Home', icon: 'fa-home', subitems: []}, {id: 2, label: 'Sitemap', icon: 'fa-sitemap', subitems: []}, {id: 3, label: 'Contact', icon: 'fa-phone', subitems: []} ]Esto funciona bien, pero en cambio, lo que me gustaría hacer es algo como esto para definir la estructura de navegación:
[ {id: 1, subitems: []}, {id: 3, subitems: []}, {id: 2, subitems: []} ]y un modelo relacionado separado que contiene la lista distinta de definiciones de navegación:
[ {id: 1, label: 'Home', icon: 'fa-home'}, {id: 2, label: 'Sitemap', icon: 'fa-sitemap'}, {id: 3, label: 'Contact', icon: 'fa-phone'} ]Esto me permitiría duplicar elementos de navegación y actualizar propiedades en un solo lugar sin duplicar las definiciones. Backbone tiene un complemento relacional que permite este tipo de cosas; no estoy seguro de cómo hacer algo como esto en angular. Podría simplemente recorrer los identificadores de navegación iniciales y reemplazarlos con las definiciones con cualquier cambio, pero pensé que podría haber una mejor manera de hacerlo con Angular 1.x
La forma angular pura de resolver algunos problemas de duplicación es usar directivas reutilizables.
function navigationItemDirective() { return { link: function(scope, element, attrs) { console.log(info) // get all necessary info scope: { info: "=info" // two-way binding to your separate model id: "@" // unique id for to bind the directive with the model } } } angular.module("app").directive("navigationElemenent", navigationItemDirective);