在同一页面中加载不同html页面的内容
[英]load the content of different html pages in the same page
问题描述
When user selects the link, i want to load the content of other html inside the same page as per user slection. 
当用户选择链接时，我想根据用户选择在同一页面内加载其他html的内容。 The links provided are inside a controller(myController). 提供的链接位于控制器（myController）内部。 How to load the red.html and green.html based on the user selection. 如何根据用户选择加载red.html和green.html。 The below js code works if the links are not inside the ng-controller. 如果链接不在ng-controller内部，则下面的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: I want the links to be inside ng-controller="myController" and based on the user selection i want to load the html page in the same page. PS：我希望链接位于ng-controller="myController"并且基于用户选择，我想将HTML页面加载到同一页面中。 If i remove ng-controller from div, it is loading the content but i want the links to be inside the controller as shown in the above code. 如果我从div中删除ng-controller，则它正在加载内容，但我希望链接位于控制器内，如上面的代码所示。
1 个解决方案
解决方案1
0 已采纳 2017-09-28 17:18:06
Problem was you didn't implement your controller as below. 问题是您没有实现以下控制器。
//DEFINE THE CONTROLLER
////////////////////////////////
app.controller("myController", function(){
});
Look at the following example and it's working perfectly. 看下面的例子，它运行良好。 Also I modified templateUrl to template just for demonstrate purposes. 此外，我修改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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.