Question

由于我缺乏JS-Experience，我不得不再次打扰你一个问题;）...

我有一个侧边栏使用javascript函数的模板，当点击父项时应显示子菜单。如果我对侧边栏进行硬编码，一切正常。

但我真正想要的是使用angularJS'ng-repeat动态构建该菜单。 当我尝试这个时，菜单不再崩溃。

这是一个重建问题的例子（我希望通过清理周围不相关的代码，以重建示例而不会搞砸）：

首先，我们得到了以下文件结构：

的资产
- 的 angularjs
  - angular.min.js
- 的自举
  - [You find that standard bootstrap 3.0.3 structure here (css, fonts, js)]
- 的字体真棒
  - [You find that standard font-awesome structure here]
- 的 jquery的
  - jquery.js（v.1.10.2）
公开
- 的 JS
  - template.js
的视图
- 的index.html
- 解DE.json

index.html看起来像：

<!DOCTYPE html>
<html ng-app id="ng-app" ng-controller="languageKey">

<head>
    <title>{{ lg.website }}</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

    <link rel="stylesheet" href="../assets/font-awesome/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">

    <style>
        #main-nav .sub-nav {
            display: none;
            list-style-type: none;
            padding: 1em 0;
            padding-left: 25px;
            margin-top: 0;
            margin-bottom: 0;
            border-bottom: none;
            position: relative;
            top: 0;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <nav id="sidebar">
            <ul class="open-active" id="main-nav">

                <li class="dropdown" ng-repeat="lang in lg.sidebar.menuItems">
                    <a href="javascript:;">
                        <i class="fa fa-{{ lang.icon }}"></i>
                        {{ lang.title }}
                        <span class="caret"></span>
                    </a>
                    <ul class="sub-nav">
                        <li ng-repeat="sub in lang.subItems">
                            <a href="#">
                                <i class="fa fa-{{ sub.icon }}"></i>
                                {{ sub.title }}
                            </a>
                        </li>
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="javascript:;">
                        <i class="fa fa-file-text"></i>
                        Example Pages
                        <span class="caret"></span>
                    </a>
                    <ul class="sub-nav">
                        <li>
                            <a href="./page-profile.html">
                                <i class="fa fa-user"></i>
                                Profile
                            </a>
                        </li>
                        <li>
                            <a href="./page-invoice.html">
                                <i class="fa fa-money"></i>
                                Invoice
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>

    <script src="../assets/jquery/jquery.js"></script>
    <script src="../assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="../assets/angularjs/angular.min.js"></script>
    <script src="../public/js/template.js"></script>
    <script>
        function languageKey($scope, $http)
        {
           $http({method: 'POST', url: 'de-DE.json'}).success(function(data)
           {
               $scope.lg = data; //response Data
           });
        }
    </script>
</body>
</html>

de-DE.json看起来像：

{
    "website":"Website Name",
    "sidebar": {
        "menuItems": [
            {
                "title":"Dashboard",
                "icon":"dashboard"
            },
            {
                "title":"Musik verwalten",
                "icon":"file-text",
                "subItems": [
                    {
                        "title": "Songs hochladen",
                        "icon": "user"
                    },
                    {
                        "title": "Diskografie",
                        "icon": "money"
                    },
                    {
                        "title": "Statistik",
                        "icon": "dollar"
                    }
                ]
            },
            {
                "title":"Einstellungen",
                "icon":"tasks",
                "subItems": [
                    {
                        "title": "Benutzer",
                        "icon": "location-arrow"
                    },
                    {
                        "title": "Anfragen",
                        "icon": "magic"
                    },
                    {
                        "title": "Einstellungen",
                        "icon": "check"
                    },
                    {
                        "title": "Sprachen",
                        "icon": "check"
                    },
                    {
                        "title": "Neuigkeiten",
                        "icon": "check"
                    }

                ]
            }
        ]
    }
}

最后是template.js：

var App = function () {
    "use strict";

    var chartColors = ['#e5412d', '#f0ad4e', '#444', '#888','#555','#999','#bbb','#ccc','#eee'];

    return { init: init, chartColors: chartColors, debounce: debounce };

    function init () {
        initLayout ();      
    }

    function initLayout () {
        $('#site-logo').prependTo ('#wrapper');
        $('html').removeClass ('no-js');

        Nav.init ();    

        $('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { 
            e.stopPropagation(); 
        });
    }

    function debounce (func, wait, immediate) {
        var timeout, args, context, timestamp, result;
        return function() {
            context = this;
            args = arguments;
            timestamp = new Date();

            var later = function() {
                var last = (new Date()) - timestamp;

                if (last < wait) {
                    timeout = setTimeout(later, wait - last);
                } else {
                    timeout = null;
                    if (!immediate) result = func.apply(context, args);
                }
            };

            var callNow = immediate && !timeout;

            if (!timeout) {
                timeout = setTimeout(later, wait);
            }

            if (callNow) result = func.apply(context, args);
            return result;
        };
    }
}();



var Nav = function () {

    return { init: init };

    function init () {
        var mainnav = $('#main-nav'),
            openActive = mainnav.is ('.open-active'),
            navActive = mainnav.find ('> .active');

        mainnav.find ('> .dropdown > a').bind ('click', navClick);

        if (openActive && navActive.is ('.dropdown')) {         
            navActive.addClass ('opened').find ('.sub-nav').show ();
        }
    }

    function navClick (e) {
        e.preventDefault ();

        var li = $(this).parents ('li');        

        if (li.is ('.opened')) { 
            closeAll ();            
        } else { 
            closeAll ();
            li.addClass ('opened').find ('.sub-nav').slideDown ();          
        }
    }

    function closeAll () {  
        $('.sub-nav').slideUp ().parents ('li').removeClass ('opened');
    }
}();


$(function () {
    App.init ();
});

正如您所看到的，我已经硬编码了侧边栏的最后一项（示例页面），它应该可以正常工作。上面的部分没有。

我知道这个例子很长，但我不知道如何以一种让你简单地重建问题的方式来减少它。

无论如何，我希望有人可以帮助我。

祝你好运本

Answer 1

简短的回答是，你的init函数发生在角度构建DOM之前。您知道jQuery需要等待文档准备好做大多数事情吗？好吧，想象一下这个文件正在发生变化。那是棱角分明的。您的文档是100％动态的。您的navclick函数未绑定到ng-repeat中的任何内容...因为ng-repeat尚未创建任何内容。

将角度添加到现有的javascript应用程序非常棘手。实现这一目标的最简单方法是删除现有的jQuery并在Angular中尝试全部。起初这看起来令人生畏，但它可能很容易！使用ng-click替换navclick等

AngularJS杀死了我的Javascript函数

1 个答案: