Question

好的，我有一个非常基本的网站，我正在修改我正在修改使用MEAN堆栈，因此我开始使用Angular。我正在使用Scotch.io's MEAN starter App作为入门基础。到目前为止，它非常简单，我在模板中有关键组件，并使用ng-include添加它们。

HTML

    <title>First Angular Page</title>

    <!-- CSS -->
      <link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css"> <!-- Font Awesome -->
      <link href='http://fonts.googleapis.com/css?family=Quicksand:700|Montserrat:700|Open+Sans|Sniglet:400,800' rel='stylesheet' type='text/css'> <!-- Google Fonts -->
    <link rel="stylesheet" href="css/mainStyles.css"> <!-- Stephie's styles -->

    <!-- JS -->
    <script src="libs/angular/angular.min.js"></script>
    <script src="libs/angular-route/angular-route.min.js"></script>

    <!-- ANGULAR CUSTOM -->
    <script src="js/controllers/MainCtrl.js"></script>
    <script src="js/controllers/NerdCtrl.js"></script>
    <script src="js/services/NerdService.js"></script>
    <script src="js/appRoutes.js"></script>
    <script src="js/app.js"></script>
</head>
<body ng-app="sampleApp" ng-controller="NerdController">

<!-- NAVAGATION -->
<div ng-include='"templates/navagation.html"'></div> 

<div id="site-canvas">
    <!-- HEADER -->
<div ng-include='"templates/header.html"'></div>
<div id="page-content">



    <!-- ANGULAR DYNAMIC CONTENT / UNIQUE PAGE FRAGMENT -->
    <div ng-view></div>
</div> <!-- #page-content -->

<!-- FOOTER -->
<div ng-include='"templates/footer.html"'></div>

</div><!-- #site-canvas -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/menu.js"></script>

</body>
</html>

但是现在我遇到了问题，我的menu.js文件无效。它几乎完全由使用jQuery的add / removeClass方法组成这是我正在使用基本HTML工作的网站的旧代码笔，以说明它应该如何工作。 http://codepen.io/StuffieStephie/pen/BNqJVX

  function toggleNav() {
if ($('#drawer').hasClass('show-nav')) {
        $('#drawer').removeClass('show-nav');
        $('#nav-icon').removeClass('open');
        $("nav li.gotsMenus").removeClass("showSub");
} else {
        $('#drawer').addClass('show-nav');
        $('#nav-icon').addClass('open');
        $("nav li.gotsMenus").removeClass("showSub");
}
}
  $('#closeButton, #site-canvas, nav li li').click(function() {
      $('#drawer').removeClass('show-nav');
      $('#nav-icon').removeClass('open');
      $("nav li.gotsMenus").removeClass("showSub");
});

但这不适用于我的Angular模板。（或者至少，点击和悬停功能没有。自动隐藏标题的滚动功能仍然神秘地工作......？所以它有点工作）

那么......从哪里开始？我很抱歉，如果这是一个非常愚蠢的问题，但我是Angular的新手，我现在已经旋转了几个小时了。我把它放在指令或控制器或模块中还是什么？我必须用香草js重写这个吗？即使我这样做，我还有其他jQuery依赖项（我有一个由Tumblr的JSON API驱动的图像库，它使用依赖于jQuery的灯箱，等等。）

如果有人能指出我正确的方向，我会非常感激; _;

Answer 1

听起来像竞争条件，当脚本执行时，DOM中可能没有#menuHeader。您可能需要使用委托将代码添加到load回调。所以喜欢：

$("#menuHeader").on('load', function () {
    // Put menu.js code here
});

我会提出一个断点，并在执行时弄清楚DOM中的实际内容。并且基本上弄清楚首先加载DOM然后运行脚本需要什么。

重写脚本“Angular方式”？

1 个答案: