[英]Unable to fetch data from controller into view using ng-route
控制器部分
下面是控制器部分,在这里我无法从控制器aa和bb提取数据到html页面中的学生和课程
/// <reference path="Angularmin.js" />
/// <reference path="angular_route.js" />
/// <reference path="C:\Users\prerna.bhadwal\Documents\projects\practice_angular\practice_angular\HtmlPage2.html"
var app = angular.module('mod', ['ngRoute']);
//var app = angular.module('mod', []);
app.config(function ($routeProvider) {
$routeProvider
.when("/Students", {
templateUrl: "Templates/Courses.html",
controller:"aa"
})
.when("/Courses", {
templateUrl: "Templates/Students.html",
controller: "bb"
})
})
.controller("aa", function ($scope) {
$scope.msg = "hello how r";
}).controller("bb", function ($scope) {
$scope.msg1 = "hhhhhh";
})
HTML页面部分
这是我要路由到学生和课程html页面的html部分:
<!DOCTYPE HTML>
<html ng-app="mod">
<head>
<!--<script src="Scripts/Controller2.js"></script>-->
<script src="Scripts/Angularmin.js"></script>
<script src="Scripts/Controller.js"></script>
<script src="Scripts/angular_route.js"></script>
<title></title>
</head>
<body >
<!--<a href="#/Students">students</a>
<a href="#/Courses">courses</a>-->
<!--<div>
{{datafromservice}} datafromservice
</div>-->-->
<a href="#/Students">Red</a>
<a href="#Courses">Green</a>
<div ng-view></div>
</body>
</html>
这是学生的html页面:
<div>
<ul>
<li>Student class A</li>
<li>Student Class B</li>
<li>{{msg}}</li>
</ul>
</div>
这是课程的html页面:
<div>
<ul>
<li>Maths</li>
<li>Science</li>
<li>{{msg1}}</li>
</ul>
</div>
我认为这就是您要尝试的...将价值传递给路线...
完整代码段中的代码...以及students.htm中,请插入以下代码行...
将此插入您的... students.htm
<li>{{gottenValue}}</li>
var app = angular.module('mod', ['ngRoute']); //var app = angular.module('mod', []); app.config(function ($routeProvider) { $routeProvider .when("/Students", { templateUrl: "students.htm", controller:"aa", passValue: 'exampleA' }) .when("/Courses", { templateUrl: "rootScope.htm", controller: "myCtrl" }) }) .controller("aa", function ($scope, $route) { $scope.msg = "hello how ru "; $scope.gottenValue = $route.current.$$route.passValue; console.log($scope.gottenValue); $scope.passValue }).controller("bb", function ($scope) { $scope.msg1 = "hhhhhh"; });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script> <div ng-app="mod"> <!--<a href="#/Students">students</a> <a href="#/Courses">courses</a>--> <!--<div> {{datafromservice}} datafromservice </div>-->--> <a href="#!Students">Red</a> <a href="#!Courses">Green</a> <div ng-view></div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.