使用angular js进行路由,其他javascript无法处理路由选项卡
Routing with angular js, other javascript doesn't work for routed tabs
我正在用angularjs做一个单页应用。路由工作得很好,所有和我的javascript是针对元素不在ng-view
工作像一个魅力。然而,用于ng-view
内元素的javascript根本不起作用。
所以,例如,当我点击我的导航菜单的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>
你的ng-view在任何控制器之外。
你必须为你的路由(部分视图)定义这样的控制器:
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){
});
之后,你可以在相应的控制器中为一些视图编写javascript。你的路由逻辑将确保你注入到ng-view中的每个分部视图都使用为该视图(或模板)定义的控制器。
可以使用
$('body').on('click', '.navbar-nav>li>a', function() {
$('.navbar-nav>li').css('background', '#fcfcfc');
$(this).parent().css('background', '#337ab7');
)};
但是这是一个糟糕的方式来制作angular应用程序。通常你不会在angular应用程序范围之外创建事件处理程序。至少应该使用ng-click。而更好的方法是创建一个指令。
相关文章:
- Nodejs和express路由,如何处理客户端的承诺
- 如何使用服务器上的react路由器处理所有可能的路由
- API的快速路由-当您有子资源时的URL处理程序
- 将路由处理程序委托给NodeJS+Express中的其他模块
- Vue.js路由未处理任何方法
- 如何在ember.js中将多个模型处理成一个模板/路由
- Node.js API设计和路由处理
- express 4.0主体解析器对路由处理程序不可见
- 处理Ember.js默认路由之外的页面URL哈希参数
- Ember.js处理View事件后转换到路由
- 如何将快速路由处理传递给下一个中间件并破坏当前代码块
- 是否可以避免在路由更改时重新呈现父路由处理程序组件
- `expressJS路由处理程序中未定义this
- AngularJs.路由.处理服务器请求.很少有问题
- 对passportjs+Node.js+Express.js Rest API调用成功身份验证和失败的路由处理程序
- Express.js:从路由处理程序中调用next(error)会调用全局错误处理中间件吗?
- 用angular 1.5的组件路由处理浏览器刷新事件
- 如何将被拒绝的承诺转换为异常,并从Express路由处理程序抛出该异常?
- 我可以'我没有成功地链接我的路由处理程序
- 浏览器后退按钮上未调用主干路由处理程序