Javascript Angularjs+；指令文件html内容单击事件在js文件中不起作用_Javascript_Jquery_Html_Angularjs_Angularjs Directive

Javascript Angularjs+；指令文件html内容单击事件在js文件中不起作用

javascript jquery html angularjs

Javascript Angularjs+；指令文件html内容单击事件在js文件中不起作用,javascript,jquery,html,angularjs,angularjs-directive,Javascript,Jquery,Html,Angularjs,Angularjs Directive,我是个新手现在尝试拆分模板，如页眉、页脚、左菜单等这里我添加了左菜单的示例左侧菜单具有id=侧栏菜单”。单击侧栏菜单后，需要执行一些操作但是custome.js中的相应js “侧栏菜单”单击事件不工作 Index.html <!DOCTYPE html> <html lang="en"> <head> <link href="bootstrap.css" rel="stylesheet"> <s

我是个新手

现在尝试拆分模板，如页眉、页脚、左菜单等

这里我添加了左菜单的示例

左侧菜单具有id=侧栏菜单”。单击侧栏菜单后，需要执行一些操作

但是custome.js中的相应js

“侧栏菜单”单击事件不工作

Index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="bootstrap.css" rel="stylesheet">
        <script src="jquery.min.js"></script>
    </head>
    <body class="nav-md" ng-app="myApp" >
        <div class="container body">
            <div class="main_container">
                <div left-menu></div>
                <!-- top navigation -->
                <div top-navigation></div>
                <!-- /top navigation -->
            </div>
            <script src="vendor/bootstrap/dist/js/bootstrap.js"></script>
            <script src="vendor/angular/angular.js"></script>
            <script src="custom.js"></script>
            <script src="app.js"></script>
    </body>
</html>

custom.js

$(function () {
    $('#sidebar-menu li').click(function () {

        alert("Ddd");
        if ($(this).is('.active')) {
            $(this).removeClass('active');
            $('ul', this).slideUp();
            $(this).removeClass('nv');
            $(this).addClass('vn');
        } else {
            $('#sidebar-menu li ul').slideUp();
            $(this).removeClass('vn');
            $(this).addClass('nv');
            $('ul', this).slideDown();
            $('#sidebar-menu li').removeClass('active');
            $(this).addClass('active');
        }
    });

});

left-menu.html

<div id="sidebar-menu" >
    <div class="menu_section">
        <h3>General</h3>
        <ul class="nav side-menu">
            <li>
                <a href="index3.html">Dashboard</a>
            </li>
            </li>
            <li>
                <a href="form_advanced.html">Advanced Components</a>
            </li>
        </ul>
    </div>
</div>


一般的

我理解我先在指令方法中加载js文件，然后在指令方法中加载html内容的错误。

首先去掉custom.js，然后添加一个“nav”指令标记，如下所示：

<div id="sidebar-menu" >
    <div class="menu_section">
        <h3>General</h3>
        <nav></nav>
    </div>
</div>

我还没有测试代码，但这是你需要做的要点

当您需要操作dom时，您应该创建一个指令并使用“link”函数，该函数将传递一个scope、element（该指令的一个轻量级jquery包装的dom元素）和属性。从那里您可以执行所需的任务。另外，请确保有一个全局jQuery对象“$”，angular的jqLite版本是angular.element*不要与在链接函数中传递的“element”混淆，但是lite版本没有您可能需要的所有功能。

首先去掉custom.js然后添加一个“nav”指令标记，如下所示：

<div id="sidebar-menu" >
    <div class="menu_section">
        <h3>General</h3>
        <nav></nav>
    </div>
</div>

我还没有测试代码，但这是你需要做的要点

当您需要操作dom时，您应该创建一个指令并使用“link”函数，该函数将传递一个scope、element（该指令的一个轻量级jquery包装的dom元素）和属性。从那里您可以执行所需的任务。另外，请确保有一个全局jQuery对象“$”，angular的jqLite版本是angular.element*不要与链接函数中传递的“element”混淆，但是lite版本没有您可能需要的所有提示。

您的问题很清楚。您可以添加plunker/JSFIDLE吗？这样我们就可以看到错误。由于您是angular的新手，您可能不知道框架的功能，但您应该尝试在根本不使用

custom.js

jQuery代码的情况下重写它。angular内置了

ng class

等指令，可以处理您正在做的大部分工作。@SteamDev-是的我理解ng类。因为我在处理现有的项目。所以我尝试使用现有的方法。这样做是可能的吗？我也使用了一些jquery插件。你的问题很清楚。你能添加plunker/JSFIDLE吗？这样我们就可以看到错误。因为你是angular的新手，你可能不知道框架的功能，但是您应该尝试在不使用

custom.js

jQuery代码的情况下重写此代码。Angular内置了

ng class

等指令，可以处理您正在做的大部分工作。@SteamDev-是的，我理解ng类。因为我正在处理现有项目。所以我尝试使用现有方法。这样做是可能的我还使用了一些jquery插件。

<ul class="nav side-menu">
  <li ng-click="">
    <a href="index3.html">Dashboard</a>
  </li>
  <li>
    <a href="form_advanced.html">Advanced Components</a>
  </li>
</ul>

app.directive('nav', function() {
  return {
    restrict: 'EA',
    template: 'nav.html',
    link: function(scope, element, attrs) {
      element.find('li').click(function () {
        var $this = $(this); // optimize

        if ($this.is('.active')) {
            $this.removeClass('active');
            //$('ul', this).slideUp(); ? not sure what you're doing here?
            $this.removeClass('nv');
            $this.addClass('vn');
        } else {
            $this.find('ul').slideUp();
            $this.removeClass('vn');
            $this.addClass('nv');
            //$('ul', this).slideDown(); ? not sure what you're doing here?
            element.find('li').removeClass('active');
            $this.addClass('active');
        }
      }); 
    }
  }
});