繁体   English   中英

无法使用ng-route将数据从控制器中提取到视图中

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM