Angular relational models? Can a model refer to another model?

Question

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

score 0 · Answer 1 · answered Apr 27 '17 at 21:58

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);

Angular relational models? Can a model refer to another model?

1 Answers1