AngularJS 无法生成动态菜单

Question

我正在尝试使用 angularJS 构建动态菜单，不幸的是它不起作用，我不知道为什么。有什么想法吗？

这个想法是：我将遍历当前控制器实例的 menuItems 集合。 item 的 name 属性将显示为 menuItem 名称，而 menuItem 的 path 属性将作为参数传递给 nagivate() 函数。

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>

Answer 1

您在 <ul> 标签上使用了 ng-repeat，这将为您的菜单数组中的每个项目生成一个 <ul>。在<li> 上使用它，这样每个菜单项都是一个菜单项，而不是一个空菜单。

您也不需要将item.path 包装在{{}} 中。当您开始使用 Angular 时，这是一个常见的错误。将其更改为data-ng-click="navigate(item.Path)" 我也没有看到您在 HTML 中的任何位置使用 loginController。试试<header class="container" ng-controller="loginController">