在同一页中加载不同html页的内容。
在同一页中加载不同html页的内容。
提问于 2017-09-28 17:08:56
当用户选择链接时，我希望按照用户选择的方式在相同的页面中加载其他html的内容。提供的链接在控制器(MyController)中。如何根据用户选择加载red.html和green.html。如果链接不在ng控制器内，下面的js代码可以工作。
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<body ng-app="myApp">
<div ng-controller="myController">
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<div ng-view></div>
</div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "main.htm"
})
.when("/red", {
templateUrl : "red.html"
})
.when("/green", {
templateUrl : "green.html"
})
.when("/blue", {
templateUrl : "blue.html"
});
});
</script>
</body>
</html>PS:我希望链接在ng-controller="myController"内部，基于用户选择，我希望在同一个页面中加载html页面。如果我从div中删除ng控制器，它将加载内容，但我希望链接在控制器内，如上面的代码所示。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-09-28 17:18:06
问题是您没有按下面的方式实现控制器。
//DEFINE THE CONTROLLER
////////////////////////////////
app.controller("myController", function(){
});看看下面的例子，它运行得很好。另外，为了演示目的，我将templateUrl修改为template。
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<body ng-app="myApp">
<div ng-controller="myController">
<a href="#!red">Red</a>
<a href="#!green">Green</a>
<div ng-view></div>
</div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
//DEFINE THE CONTROLLER
////////////////////////////////
app.controller("myController", function() {
});
app.config(function($routeProvider) {
$routeProvider
.when("/", {
template: "<h1>Home</h1>"
})
.when("/red", {
template: "<h1>Red</h1>"
})
.when("/green", {
template: "<h1>Green</h1>"
})
.when("/blue", {
template: "<h1>Blue</h1>"
});
});
</script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46474766
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号