我是 Angular JS 新手，
现在尝试拆分模板，例如页眉、页脚、左侧菜单等。
这里我添加了左侧菜单的示例。
左侧菜单有 id=sidebar-menu"。一旦点击侧边栏菜单需要执行一些操作。
但是相应的js在custome.js中有
“侧边栏菜单”点击事件不起作用。
索引.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>
app.js
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', '$httpProvider',
function($routeProvider, $httpProvider) {
$routeProvider.when('/login', {
templateUrl : 'views/login.html',
controller : 'userController'
}).when('/register', {
templateUrl : 'views/register.html',
controller : 'userController'
}).otherwise({
redirectTo : '/login'
});
}]);
app.directive('leftMenu', function() {
return {
restrict : 'A',
templateUrl : "left-menu.html",
replace : true
};
});
自定义.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');
}
});
});
左菜单.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>
然后构建 nav.html
<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');
}
});
}
}
});
我还没有测试过代码，但这是您需要做的要点。
当您需要操作 dom 时，您应该创建一个指令并使用“link”函数，该函数将传递范围、元素(指令的轻量 jquery 包装的 dom 元素)和属性。从那里您可以执行所需的任务。还要确保有一个全局 jQuery 对象“$”，Angular 确实附带了一个 jqLite 版本作为 angular.element *不要与链接函数中传递的“元素”混淆，但是 lite 版本没有所有您可能需要的附加功能。
关于javascript - Angularjs +指令文件html内容点击事件在js文件中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35367595/