我正在尝试在我的代码中应用一些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');
});
答案 0 :(得分:0)
首先提出的解决方案
确保在AngularJs之前在您的应用程序中加载Jquery。
在client.html
第二个提出的解决方案
将脚本移动到控制器中,如下例所示
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
答案 1 :(得分:0)
解决此问题的一种方法是创建一个自定义指令并将其添加到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
}
}
})
答案 2 :(得分:0)
为什么要一起使用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>
答案 3 :(得分:0)
直接更改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>