使用 ngroute 更改小型站点上的页面后，我的 jquery 切换不起作用

Question

我一直在开发一个基本的 AngularJS 网站，最近运行遇到一个问题，导致我无法在导航到其他页面后使用 jquery 切换。我相信我的问题出在路由上，因为如果我将它保存在我的 index.html 文件中，以及当我将第一页分开并将其放入 codepen 时，切换就会起作用。我无法在网络上找到任何可以帮助我的太相似的东西，这可能是因为我一直在错误地问这个问题，但是在这一点上我想我需要寻求帮助。这可能只是我对 ng-route 或 angular 控制器的基本缺乏理解，所以如果是这种情况，请多多包涵/

$(document).ready(function() {
  $("#SmMagCld").click(function() {
    $("#SMC").toggle(350);
  });
});

<!doctype html>
<html>

<head>

  <link rel="stylesheet" href="style.css">

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
  <script src="script.js"></script>

</head>

<body ng-app="myApp">


  <p>PLS JUST LET ME ROUTE TO MY OTHER PAGES AND STILL MAINTAIN FUNCTIONALITY MR ANGULAR... :(</p>
  <br>
  <a href="#/!" style="font-size: 10px">:(</a>
  <a href="#!page1" style="font-size: 25px">Page1</a>
  <a href="#!page2" style="font-size: 25px">Page2</a>

  <div ng-view></div>
  <script>
    var app = angular.module("myApp", ["ngRoute"]);
    app.config(function($routeProvider) {
      $routeProvider
        .when("/", {
          templateUrl: "main.html"
        })
        .when("/page1", {
          templateUrl: "page1.html"
        })
        .when("/page2", {
          templateUrl: "page2.html"
        });
    });
    app.controller('mainCtrl', function($scope) {
      $scope.message = 'welcome hooooooooome';
    });
    app.controller('page1Ctrl', function($scope) {
      $scope.message = 'who is on first';
    });
    app.controller('page1Ctrl', function($scope) {
      $scope.message = 'what is on second';
    });
  </script>
</body>

</html>

我还想说的是，当我把它放在我的本地主机上时，当我运行它时，它也没有出现在 plunkr 上。在路由到不同的页面后，不仅切换停止工作，而且我相信如果我能弄清楚为什么它不起作用，我可以将它应用于其他类似的问题。我创建了我链接的第一个站点，以尝试消除导致问题的其他可能变量，但如果您想查看我的路由的其他一些实例不起作用，这里是另一个 hhttps://plnkr.co/edit/98uEPuLJl8cKGjbrTGsn?p =preview 可能还有其他错误。（没有足够的声誉 post 超过两个链接所以我在 URL 前面添加了一个额外的 h）

我是 JavaScript/html 的新手，更不用说 angularJS，因此任何有关清理或改进代码的建议都将不胜感激。如果需要任何其他信息或者我没有清楚地解释我的问题，请告诉我。

Answer 1

如果它是 angular 应用，您的观点应该是局部的（它不应该有 html 或正文标签）
在 angular 之前加载 jquery。
对于事件，您可以有 ng-click、ng-mouseover、ng-keypress 等 Angularjs html 事件。您可以在该页面的控制器中使用 jquery 在它们上编写具有 dom 操作的函数。
onclick 不适用于 document.ready 中带有 jquery 的图像，因为此事件仅检查 dom 树就绪，未完成多媒体加载。您可以通过 angularjs 指令或通过将其绑定到控制器内（在模板的完整加载时执行）来拥有 onclick 绑定。这是固定的 plunker link : https://plnkr.co/edit/nZJtK1z4FkSIdiQS8Rk8?p=preview

使用 ngroute 更改小型站点上的页面后，我的 jquery 切换不起作用

After changing pages on small site using ngroute, my jquery toggle doesn't work

html

javascript

jquery

angularjs

ngroute