How to create a interactive menu? Angular-Meteor 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


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) {
        console.log([$location, $stateParams]);

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

        this.params = $stateParams;
        this.links = [];

            links() {
                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, [
]).component(name, {
    templateUrl: `imports/ui/components/${name}/${name}.html`,
    controllerAs: name,
    controller: Navigation,

function config($stateProvider) {

            //url: '/navigation',
            template: '<navigation></navigation>',