Question

我正在尝试在我的代码中应用一些jquery，但由于我使用的是ng-include，它无法正常工作，我该如何解决？

HTML：

    <html lang="" ng-app="">
     <head></head>
      <body>
        <div class="menu">
          <nav class="sidebar">
          <nav class="sidebar">
              <div ng-include="'app/client.html'"></div>
            </nav>
          </nav>
        </div>
        <script type="text/javascript">
           $(function() {
            $( "ul.sidebar-nav li:eq(1)" ).addClass('tech');
           });
        </script>
    </body>
    </html>

client.html

<div class="client">
      <div class="client-open">
        <ul class="sidebar-nav">
          <li>link1</li>
          <li>link</li>
        </ul>
      </div>
</div>

JS：

$(function() {
  $( "ul.sidebar-nav li:eq(1)" ).addClass('tech');
});

Answer 1

首先提出的解决方案

确保在AngularJs之前在您的应用程序中加载Jquery。
在client.html

第二个提出的解决方案

确保在AngularJs之前在您的应用程序中加载Jquery。

将脚本移动到控制器中，如下例所示

    app.controller("myCtrl", function($scope, $rootScope,$timeout) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
  $rootScope.$on('$includeContentLoaded', function() {
    $timeout(function(){
         load();
    });
  });

});

然后输入您的函数，如以下示例

var load = function() {

$（“ul.sidebar-nav li：eq（1）”）。addClass（'tech'）;

}

您可以参考此SO问题以获取更多信息。 Angular: ng-include, jQuery not working unless in HTML file

Answer 2

解决此问题的一种方法是创建一个自定义指令并将其添加到div.client，然后您可以在该指令的编译或链接函数中添加您的jquery代码。

<强> HTML

<div class="client" load-evt>
 ...
</div>

角度指令

app.directive("loadEvt", function(){
 return {
   restrict: "A",
   compile: function(elem){
     //write your code in compile phase
   },
   link: function(elem, scope){
    //or write your code in link phase
   } 
 }
})

Answer 3

为什么要一起使用jQuery和angular？这些是2个可以帮助您编写Web应用程序的库，但是它们采用了非常不同的方式。

如果你需要jQuery来修改类，你应该只使用ng-class，就像@fissio建议的那样。但是在您提供的用例中，只需将class="tech"添加到第二个li。（我认为这不是你真正想知道的）

<div class="client">
  <div class="client-open">
    <ul class="sidebar-nav">
      <li>link 1</li>
      <li class="tech">link 2</li>
    </ul>
  </div>
</div>

Answer 4

直接更改DOM的代码应该进入指令。创建一个指令并将其附加到您尝试修改的元素。

普兰克 - https://plnkr.co/edit/AIRb3egGSMkWfd2gpekL?p=preview

的index.html

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <script>
      angular.module('app', [])
      .directive('attachJquery', function() {
          return {
              restrict: 'A',
              link: function (scope, element) {
                  $( "ul.sidebar-nav li:eq(1)" ).addClass('tech');
              }
          };
      })
    </script>
    <style>
      .tech {
        color: red;
      }
    </style>
  </head>

  <body>
    <div class="menu">
      <nav class="sidebar">
        <nav class="sidebar">
          <div ng-include="'client.html'"></div>
        </nav>
      </nav>
    </div>
  </body>

</html>

client.html

<div class="client" attach-jquery>
      <div class="client-open">
        <ul class="sidebar-nav">
          <li>link1</li>
          <li>link</li>
        </ul>
      </div>
</div>

如何在ng-include中制作角度载荷jquery？

4 个答案: