AngularJS failed to generate dynamic menu

Question

I'm trying to build a dynamic menu by using angularJS, unfortunately it doesn't work and I have no idea why. Any thought?

The idea is: I'll iterate through a collection of menuItems of the current controller instance. The name property of the item will be shown as the menuItem name and the path property of the menuItem will be passed into nagivate() function as a parameter.

var clientParams = {
    appKey: "....."
    , appSecret: "....."
};

var app = angular.module("helloKinveyApp", ["ngRoute", "kinvey"]);

app.config(["$routeProvider", function($rootProvider) {
    $rootProvider
        .when("/", {
            controller: "loginController"
            , templateUrl: "app/partials/login.html" })
        .when("/partials/password_reset", {
            controller: "resetPasswordController"
            , templateUrl: "app/partials/password_reset.html" })
        .when("/partials/sign_up", {
            controller: "signupController"
            , templateUrl: "app/partials/sign_up.html" })
        .when("/partials/logged_in", {
            controller: "loggedInController"
            , tempalteUrl: "app/partials/logged_in.html" })
        .otherwise({ redirectTo: "/"});
}]);

app.run(["$location", "$kinvey", "$rootScope", function($location, $kinvey, $rootScope) {
    var promise = $kinvey.init({
       appKey: clientParams.appKey
        , appSecret: clientParams.appSecret
    });
    
    promise.then(function() {
        console.log("Kinvey init with success");
        determineBehavior($location, $kinvey, $rootScope);
    }, function(errorCallback) {
        console.log("Kinvey init with error: " + JSON.stringify(errorCallback));
        determineBehavior($location, $kinvey, $rootScope);
    });
}]);

function determineBehavior($location, $kinvey, $rootScope) {
    var activeUser = $kinvey.getActiveUser();
    console.log("$location.$$url: " + $location.$$url);
    
    if (activeUser != null) {
        console.log("activeUser not null, determine behavior");
        
        if ($location.$$url != "/partials/logged-in")
            $location.path("/partials/logged-in");
    }
    else {
        console.log("activeUser null redirecting");
        
        if ($location.$$url != "/partials/login")
            $location.path("/partials/login");
    }
}


'use strict';
app.controller("loginController", function($scope, $kinvey, $location) {
    $scope.menuItems = [
        {name: "Pricing", path: "#"}
        , {name: "Customers", path: "#"}
        , {name: "Help", path:"#"}
        , {name: "Sign up", path: "#"}
    ];
    
    $scope.signin = function($scope, $kinvey, $location) {
        alert("signin()");
    };
    
    $scope.signup = function($scope, $kinvey, $location) {
        alert("signup()");
    };
    
    $scope.forgotPassword = function($scope, $kinvey, $location) {
        alert("forgotPassword");
    }
    
    $scope.navigate = function (path2Navigate) {
        alert(path2Navigate);
    }
});

<div class="col-xs-12 col-sm-12 col-sm-offset-3 col-md-8 col-md-offset-3">
    <h3>Welcome back</h3>
    <br><br>
    <form class="form-horizontal" role="form">
        <div class="form-group">
            <div class="col-xs-2 col-sm-2 col-md-2">
                <label class="control-label" for="userName">User Name</label>
            </div>
            
            <div class="col-xs-6 col-sm-6 col-md-6">
                <input type="text" class="form-control" id="userName" placeholder="Enter user name">
            </div>
        </div>
        
        <div class="form-group">
            <div class="col-xs-2 col-sm-2 col-md-2">
                <label class="control-label" for="password">Password</label>
            </div>
            
            <div class="col-xs-6 col-sm-6 col-md-6">
                <input type="password" class="form-control" id="password" placeholder="Enter password">
            </div>
        </div>
        
        <div class="form-group">
            <div class="col-xs-6 col-sm-6 col-sm-offset-2 col-md-6">
                <div class="checkbox">
                    <label>
                        <input type="checkbox" value="">Remember me?
                    </label>
                </div>
            </div>
        </div>
        
        <div class="form-group">
            <div class="col-xs-2 col-sm-2 col-sm-offset-2 col-md-2">
                <button type="submit" class="btn btn-primary" data-ng-click="signin()">Sign in</button>
            </div>
            
            <div class="col-xs-3 col-sm-3 col-md-3 pull-left">
                <button type="button" class="btn btn-link" data-ng-click="forgotPassword()">Forgot my password?</button>
            </div>
        </div>
    </form>
</div>

Jesse Carter · Accepted Answer · 2014-12-12T22:19:02.057

0

You're using ng-repeat on the <ul> tag which will generate you a <ul> for each item in your menu array. Use it on <li> instead so that each one is a menu item as opposed to an empty menu.

You also don't need to wrap item.path in {{}}. This is a common mistake when you're starting out with angular. Change it to data-ng-click="navigate(item.Path)" I also don't see you using your loginController anywhere in your HTML. Try <header class="container" ng-controller="loginController">

edited Dec 12 '14 at 22:19

answered Dec 12 '14 at 21:42

Jesse Carter

20,062
7
64
101

I have moved ng-repeat into but it's still showing nothing. Any thought – newbie Dec 12 '14 at 22:15
I did specify the mapping between view & its controller in app.js Kindly see my edited code above – newbie Dec 12 '14 at 22:31
That's not going to work. Your menu is outside of your ng-view directive and will not be affected by the routes that you've configured – Jesse Carter Dec 12 '14 at 22:33
such a good spot. Many thanks for your patient :). Well do you have any suggestion for the solution. I want the menu to be generated automatically based on different instance of controller. And I also want the menu resize in the header of the page – newbie Dec 12 '14 at 22:37

AngularJS failed to generate dynamic menu

1 Answers1