“用Angular的方式”重写脚本

Rewriting scripts "the Angular way"?

本文关键字：重写 脚本 方式 Angular      更新时间：2023-09-26

好了，我有一个非常基本的网站，我正在工作，我现在修改为使用MEAN堆栈，因此我开始使用Angular。我用的是苏格兰威士忌。作为开始的基础。到目前为止，它非常简单，我已经在模板中获得了关键组件，并使用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的灯箱，以及其他东西)。

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

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

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

我将放置一个断点，并找出在执行时DOM中实际包含的内容。首先找出加载DOM需要什么，然后运行脚本。

相关文章：