Question

我正在尝试从Index.html路由到View1，从View1路由到View2。但有些方面，角度数据绑定和路由无法正常工作。

的index.html：

<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="purchaseDataApp">
<head>
<title>Index Page</title>
<script src="/Scripts/angular.js"></script>
<script src="controllers/routing.js"></script>
</head>
<body>
    <h1>Index Data</h1>
    <div data-ng-view=""></div>
</body>
</html>

View1.html：

<body data-ng-controller="PurchaseListController">
<table>
    <tr>
        <td><strong>Name</strong></td>
        <td><strong>Title</strong></td>
        <td><strong>Date</strong></td>
    </tr>
    <tr data-ng-repeat='detail in details'>
        <td><a href="#/view/{{detail.Id}}">{{detail.Name}}</a></td>
        <td>{{detail.Title}}</td>
        <td>{{detail.Date}}</td>
    </tr>
</table>
</body>

View2.html：

<body data-ng-controller="OrderDetailController">
<div><strong>Name:</strong> {{detail.Name}}</div>
<div><strong>Title:</strong> {{detail.Title}}</div>
<div><strong>Date:</strong> {{detail.Date}}</div>
<div>
    <span data-ng-repeat='dt in details'>{{dt.Name}} </span>
    <div>{{dt.PromotionCode}}</div>
    <div>{{dt.Address}}</div>
    <a href='#/'>Back to order list</a>
</div>
</body>

routing.js：

var purchaseDataApp = angular.module('purchaseDataApp', []);

function purchaseRouteConfig($routeProvider) {
$routeProvider.
    when('/', {
        controller: PurchaseListController,
        templateUrl: 'Routing/View1.html'
    }).
    when('/view/:id', {
        controller: OrderDetailController,
        templateUrl: 'Routing/View2.html'
    }).
    otherwise({
        redirectTo: '/'
    });
}

purchaseDataApp.config(purchaseRouteConfig);
var details = [{
    Id: 1,
    Name: 'Ray Radulvich',
    Title: 'Beginning with C#',
    Date: 'Dec 30, 2013 12:32:00',
    PromotionCode: 'BSGGS9382',
    Address: '756 E Oak ST, LA, CA- 90565'
    },
    {
    Id: 3,
    Name: 'Samantha Stivens',
    Title: 'Pro ASP>Net MVC Framework',
    Date: 'Apr 3, 2013 03:38:00',
    PromotionCode: 'JDUDUD9678',
    Address: '5443 E Northway ST, LA, CA- 90343'
    }, {
    Id: 6,
    Name: 'Melissa James',
    Title: 'JQuery UI 1.7',
    Date: 'Sep 8, 2013 12:32:00',
    PromotionCode: 'FDTERE5355',
    Address: '8676 Truxel Rd ST, LA, CA- 90542'
    }];

purchaseDataApp.controller('PurchaseListController', function ($scope) {
$scope.details = details;
});

purchaseDataApp.controller('OrderDetailController', function ($scope, $routeParams) {
$scope.detail = details[$routeParams.Id];
});

的问题：

1）Index.html显示空白页面，理想情况下它应显示View1.html - 它只显示 -

Purchase Data

2）当我去View1.html时，它没有显示任何内容 - 显示

Name    Title   Date
{{detail.Name}} {{detail.Title}}    {{detail.Date}}

可能存在一些我无法弄清楚的问题 - 它是数据绑定/路由对此有任何帮助非常感谢！

谢谢，阚

尝试以下方法：

理想情况下，我在路由文件夹中有Index.html，在路由/部分中有view1.html和view2.html。

所以我对路由感到困惑。我正在做以下代码，但它无法正常工作。这是对的吗？

var purchaseDataApp = angular.module('purchaseDataApp', ['ngRoute']);

purchaseDataApp.config(function ($routeProvider, $locationProvider) {
$routeProvider.
    when('/Partials/view1', {
        controller: 'PurchaseListController',
        templateUrl: 'view1.html'
    }).
    when('/view/:id', {
        controller: 'OrderDetailController',
        templateUrl: 'Partials/view2.html'
    }).
    otherwise({
        redirectTo: '/Partials/view1'
    });

$locationProvider.html5Mode(true);
});

Answer 1

您的View1.html和View2.html应该是部分网页而不是网页，例如Index.html

View1.html页面应仅包含与HTML相关的PurchaseListController

<div data-ng-controller="PurchaseListController">
..
</div>

，同样View2.html

<div data-ng-controller="OrderDetailController">
..
</div>

像

一样创建你的控制器

purchaseDataApp.controller('PurchaseListController', function ($scope) {
   $scope.details = details;
  //others code..
});

purchaseDataApp.controller('OrderDetailController', function ($scope, $routeParams) {
    $scope.detail = details[$routeParams.Id];
    //others code...
});

在routeProvider中输入控制器名称

controller: 'PurchaseListController'

修改

您错过了ngRoute模块。检查工作 Demo

修改

您正在使用$locationProvider，在路由中它有两种模式

$ locationProvider.html5Mode（true）// HTML5模式

$ locationProvider.html5Mode（false）// Hashbang模式（默认值）

如果您使用html5Mode(true)，则您的网址会显示为www.abc.com/somepage

如果您使用html5Mode(false)，则您的网址会显示为www.abc.com/#/somepage

对于HTML5 mode，您需要配置服务器以便其支持，否则路由将无效。

AngularJS数据绑定和路由无法正常工作

1 个答案: