AngularJS 데이터 바인딩 및 라우팅이 작동하지 않습니다.

Index.html에서 View1로, View1에서 View2로 라우팅하려고합니다. 하지만 각도 데이터 바인딩 및 라우팅이 작동하지 않는 경우도 있습니다.AngularJS 데이터 바인딩 및 라우팅이 작동하지 않습니다.

에 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]; 
});

문제 :

Index.html을 빈 페이지를 보여줍니다) 1, 이상적으로는 표시해야 View1.html - 내가 View1.html에 갈 때 그냥 displays-

Purchase Data

2), 그렇지 않은 anything- 보여 표시

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

내가 중 하나는 데이터가 이것에 어떤 도움이 많이 감사합니다 을 routng/구속력 OUT- 알 수없는 나는 몇 가지 문제가있을 수 있습니다!

덕분에, 칸

는 아래의 것들을 시도 :

은 이상적으로는 라우팅/파셜에서 라우팅 폴더와 view1.html 및 view2.html에 Index.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); 
});

출처

2014-01-26 Kanchana

귀하의 View1.html 및 View2.html는 View1.html 페이지 만 PurchaseListController

같은

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

유사 View2.html

를 관련된 HTML을 포함해야

Index.html처럼하지 않는 페이지 부분 페이지이어야한다 에서

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

당신은 ngRoute 모듈을 포함하는 놓친

편집 컨트롤러 이름

controller: 'PurchaseListController'

를 넣어 같이

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

는 컨트롤러를 만듭니다.HTML5 모드 //이 두 모드

$ locationProvider.html5Mode (true)를 가지고 라우팅에서 당신은 $locationProvider을 사용하는 작업 Demo

편집

을 확인

$ locationProvider .html5 모드 (거짓) // 해시 모드 (기본값)

당신이 html5Mode(true)를 사용하는 경우
는 다음 URL을 www.abc.com/somepage

처럼 보인다 그리고 당신은 다음 html5Mode(false)를 사용하는 경우 URL이 당신이 그렇지 않으면 라우팅이 작동하지 않습니다 지원할 수 있도록 서버를 구성해야 HTML5 mode를 들어 www.abc.com/#/somepage

것 같습니다.

출처

2014-01-26 04:39:56 Reza

귀하의 의견에 따라 원래 질문을 편집했지만, 여전히 같은 문제가 나타납니다. 생각해보십시오. – Kanchana

업데이트 된 답변 ** ** DEMO **이 (가) 추가되었습니다. – Reza

안녕하세요 @Reza, 도움 주셔서 감사합니다. 문제가 있습니다. 원래 질문에 대한 질문을 게시했습니다. ** 아래 시도한 ** ** 섹션 – Kanchana

AngularJS 데이터 바인딩 및 라우팅이 작동하지 않습니다.

답변

관련 문제