Question

控制器部分

下面是控制器部分，在这里我无法从控制器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>

Answer 1

我认为这就是您要尝试的... 将值传递到路线中...

代码段中的完整代码...以及students.htm中，请插入以下内容...

在您的... inserts.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 r u ";
    $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>

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

1 个答案: