ngRoute -不显示模板
ngRoute -不显示模板
提问于 2017-02-22 14:43:16
我使用ngRoute显示2个不同的模板，我得到了一个正确的模板，即view1.html，但当我点击我的链接( View2)时，我没有得到第二个模板中的控制器列表，即view2.html。
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="https://code.angularjs.org/1.6.0-rc.2/angular.min.js" type="text/javascript"></script>
<script src="https://code.angularjs.org/1.5.0-rc.2/angular-messages.min.js"></script>
<script src="https://code.angularjs.org/1.5.0-rc.2/angular-resource.min.js"></script>
<script src="https://code.angularjs.org/1.5.0-rc.2/angular-route.min.js"></script>
</head>
<body>
<!-- Placeholder for the views -->
<div data-ng-app="demoApp">
<ng-view></ng-view>
</div>
<script>
var demoApp = angular.module("demoApp", ["ngRoute"]);
demoApp.config(function($routeProvider){
$routeProvider
.when('/view1',
{
controller: 'simpleController',
templateUrl: 'view1.html'
})
.when('/view2',
{
controller: 'simpleController',
templateUrl: 'view2.html'
})
.otherwise ({ redirectTo: '/view1'});
});
demoApp.controller('simpleController', function($scope) {
$scope.customers =[
{name:'Shahzad',city:'shahjahanpur'},
{name:'Irshad', city:'Lucknow'},
{name:'Shamshad', city:'rampur'}
];
$scope.addCustomer = function(){
$scope.customers.push(
{ name: $scope.newCustomer.name,
city: $scope.newCustomer.city
});
};
});
</script>
</body>
</html>
**View1.html**
<div>
<h2>View 1</h2>
Name :
<br />
<input type="text" data-ng-model="filter.names" />
<ul>
<li data-ng-repeat="cust in customers | filter:filter.names | filter:city | orderBy:'city'"> {{ cust.name | lowercase}} - {{ cust.city | uppercase }}</li>
</ul>
<br />
Customer Name: <br/>
<input type="text" data-ng-model="newCustomer.name" />
<br />
Customer city: <br/>
<input type="text" data-ng-model="newCustomer.city" />
<br />
<button data-ng-click="addCustomer()">Add Customer</button>
<br /><br />
<a href="#/view2" > View2</a>
</div>
**View2.html**
<div>
<h2>View 2</h2>
city :
<br />
<input type="text" data-ng-model="filter.city">
<br />
<ul>
<li data-ng-repeat= "cust in customers | filter:filter.city | orderBy:city"> {{ cust.name }} - {{ cust.city }} </li>
</ul>
</div> 回答 1
Stack Overflow用户
发布于 2017-02-22 14:48:49
默认情况下，AngularJS将路由带有散列标签的URL。
这就是angular中# url的问题所在。
变化,
<a href="#/view2" > View2</a>致，
<a href="#!/view2" > View2</a>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42384430
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号