How to create a interactive menu? Angular-Meteor 1

help
1

Hi all

I am trying to build a menu path so the user can go up multiple levels.

I implemented a “up-one-level” button like this:

<md-button ui-sref="institution({institution: anlass.anlass.institution})" style="float: right;">Zurück zur Institution</md-button>

and now I am working on a NavigationController but I have some problems:

  1. I do not get any notification when the user clicks somewhere or uses its back-button.
  2. I can not enumerate the keys of $stateParams

So I made a workaround, but it is not displayed, when it is done. Any hints are very welcome

Regards,
clubmate

This is the code I currently have:

/**
 * Erstellt von Stefan Schindler 27.04.16
 */
import angular from 'angular';
import angularMeteor from 'angular-meteor';
import uiRouter from 'angular-ui-router'

import './navigation.html';

const name = 'navigation';

const parents = {
    'phase'      : 'anlass',
    'anlass'     : 'institution',
    'institution': undefined,
};

class Navigation {
    constructor($stateParams, $scope, $reactive, $location) {
        'ngInject';
        
        console.log([$location, $stateParams]);

        var self = this;
        setTimeout(function() {
            self.buildLinks();
        }, 666);

        $reactive(this).attach($scope);
        
        this.params = $stateParams;
        this.links = [];

        this.helpers({
            links() {
                this.buildLinks();
                
                return this.links;
            }
        });
    }
    
    resolveParent(r) {
      var s = this.params;
      console.log(['resolveParent', s,Object.keys(s), s.phase])
      for (k in s) {
        var v = s[k];
        console.log([k, v]);
      }
    }
    
    buildLinks() {
        var links = [];
        var hop = 'phase';
        var href = this.params.phase;
        console.log(['Navigation.helpers.links', hop, href, !!parents[hop]]);
        
        while (!!parents[hop]) {
            console.log([hop, href]);
            hop = parents[hop];
            links.push({ href: `/${hop}/${href}`, name: hop });
            console.log(['next', hop, !!parents[hop]]);
        }
        
        links.push({ href: '/', name: 'Start' });
        
        this.links = links.reverse();
    }
}

export default angular.module(name, [
    angularMeteor,
    uiRouter,
]).component(name, {
    templateUrl: `imports/ui/components/${name}/${name}.html`,
    controllerAs: name,
    controller: Navigation,
}).config(config);

function config($stateProvider) {
    'ngInject';

    $stateProvider
        .state(name,{
            //url: '/navigation',
            template: '<navigation></navigation>',
        });
}