I have a multi-level navigation structure like so which produces the top nav:
[
{id: 1, label: 'Home', icon: 'fa-home', subitems: []},
{id: 2, label: 'Sitemap', icon: 'fa-sitemap', subitems: []},
{id: 3, label: 'Contact', icon: 'fa-phone', subitems: []}
]
This works fine, but instead, what i'd like to do is something like this to define the navigation structure:
[
{id: 1, subitems: []},
{id: 3, subitems: []},
{id: 2, subitems: []}
]
and a separate related model that holds the distinct list of nav definitions:
[
{id: 1, label: 'Home', icon: 'fa-home'},
{id: 2, label: 'Sitemap', icon: 'fa-sitemap'},
{id: 3, label: 'Contact', icon: 'fa-phone'}
]
This would allow me to duplicate nav items, and update properties in one spot without duplicating the definitions. Backbone has a Relational plugin that allows for this type of thing - not sure how to do something like this in angular. I could just loop through the initial navigation ids and replace them with the definitions with any change, but I thought there might be a nicer way to do this with Angular 1.x
The pure angular way to solve some duplicating issues is to use reusable directives.
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);