I am working on a single page app with angularjs. The routing works fine and all and my javascript that's targeted towards elements not in the ng-view
works like a charm. However, the javascript that is meant for elements inside the ng-view
doesn't work at all.
我正在使用angularjs开发单页应用程序。路由工作正常,所有我的javascript针对不在ng-view中的元素就像魅力一样。但是,用于ng-view内部元素的javascript根本不起作用。
So for example when I click on my navigation menu the javascript works great and the menu background changes color, however if I navigate to one.html
and click on the link, no javascript triggers at all.
因此,例如当我点击我的导航菜单时,javascript工作得很好,菜单背景会改变颜色,但是如果我导航到one.html并点击链接,则根本没有javascript触发器。
index.html
<!DOCTYPE html>
<html>
<head>
<!-- Load Angular Js -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular-route.min.js"></script>
<script src="route.js"></script>
</head>
<body ng-app="single-page-app">
<div class="container">
<div class="row">
<div class="col-md-12">
<div ng-controller="cfgController">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Navigation</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#/1">One</a></li>
<li><a href="#/2">Two</a></li>
<li><a href="#/3">Three</a></li>
<li><a href="#/4">Four</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
<div ng-view>
</div>
</div>
<!-- JavaScript placed at bottom for faster page loading times -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$('.navbar-nav>li>a').click(function() {
$('.navbar-nav>li').css('background', '#fcfcfc');
$(this).parent().css('background', '#337ab7');
});
$('.test').click(function() {
alert('Working!');
})
</script>
route.js
var app=angular.module('single-page-app',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/1',{
templateUrl: 'one.html'
})
.when('/2',{
templateUrl: 'two.html'
})
.when('/3',{
templateUrl: 'three.html'
})
.when('/4',{
templateUrl: 'four.html'
})
});
app.controller('cfgController',function($scope){
});
one.html
<div class="row">
<div class="col-md-12">
<a href="#" class="test">Test Js</a>
</div>
</div>
2 个解决方案
#1
4
Your ng-view is outside of any controller.
您的ng-view不在任何控制器之外。
You have to define controllers for your routes (partial views) like this:
您必须为您的路线(部分视图)定义控制器,如下所示:
var app=angular.module('single-page-app',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/1',{
templateUrl: 'one.html',
controller: 'oneCtrl'
})
.when('/2',{
templateUrl: 'two.html',
controller: 'twoCtrl'
})
.when('/3',{
templateUrl: 'three.html',
controller: 'threeCtrl'
})
.when('/4',{
templateUrl: 'four.html',
controller: 'fourCtrl'
})
});
app.controller('cfgController',function($scope){
});
app.controller('oneCtrl',function($scope){
});
app.controller('twoCtrl',function($scope){
});
app.controller('threeCtrl',function($scope){
});
After that you can do your javascript for some view in corresponding controller. Your routing logic will assure that every partial view that you inject in your ng-view is using controller defined for that view (or template).
之后,您可以在相应的控制器中为某些视图执行javascript。您的路由逻辑将确保您在ng-view中注入的每个局部视图都使用为该视图(或模板)定义的控制器。
#2
0
You can use
您可以使用
$('body').on('click', '.navbar-nav>li>a', function() {
$('.navbar-nav>li').css('background', '#fcfcfc');
$(this).parent().css('background', '#337ab7');
)};
But it's a bad way to make angular app. Normally you wouldn't create event handlers outside angular app scope. You should use ng-click at least. And the better way is creating a directive.
但是制作角度应用程序是一种糟糕的方式。通常,您不会在角度应用范围之外创建事件处理程序。你应该至少使用ng-click。更好的方法是创建一个指令。
#1
4
Your ng-view is outside of any controller.
您的ng-view不在任何控制器之外。
You have to define controllers for your routes (partial views) like this:
您必须为您的路线(部分视图)定义控制器,如下所示:
var app=angular.module('single-page-app',['ngRoute']);
app.config(function($routeProvider){
$routeProvider
.when('/1',{
templateUrl: 'one.html',
controller: 'oneCtrl'
})
.when('/2',{
templateUrl: 'two.html',
controller: 'twoCtrl'
})
.when('/3',{
templateUrl: 'three.html',
controller: 'threeCtrl'
})
.when('/4',{
templateUrl: 'four.html',
controller: 'fourCtrl'
})
});
app.controller('cfgController',function($scope){
});
app.controller('oneCtrl',function($scope){
});
app.controller('twoCtrl',function($scope){
});
app.controller('threeCtrl',function($scope){
});
After that you can do your javascript for some view in corresponding controller. Your routing logic will assure that every partial view that you inject in your ng-view is using controller defined for that view (or template).
之后,您可以在相应的控制器中为某些视图执行javascript。您的路由逻辑将确保您在ng-view中注入的每个局部视图都使用为该视图(或模板)定义的控制器。
#2
0
You can use
您可以使用
$('body').on('click', '.navbar-nav>li>a', function() {
$('.navbar-nav>li').css('background', '#fcfcfc');
$(this).parent().css('background', '#337ab7');
)};
But it's a bad way to make angular app. Normally you wouldn't create event handlers outside angular app scope. You should use ng-click at least. And the better way is creating a directive.
但是制作角度应用程序是一种糟糕的方式。通常,您不会在角度应用范围之外创建事件处理程序。你应该至少使用ng-click。更好的方法是创建一个指令。