我正在尝试使用JayData, AngularJS和OData Web Api创建一个基本的CRUD应用程序。到目前为止，我已经创建了一个列表视图和一个编辑视图，当在列表视图中单击一个项目的编辑选项时，它成功地重定向到编辑视图，并按预期填充。但是，当我返回到List视图并选择后续的Edit选项时，Edit视图不会被填充。下面是我的相关Angular代码:
编辑:这是我的完整代码，按要求:
app.js:
var app = angular.module("app", ["localization", "ngResource", "ngRoute", "jaydata"]).
config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/Admin/Fixtures/List', { controller: FixtureListController, templateUrl: '/Content/Templates/Fixtures.html' }).
when('/Admin/Fixtures/Add', { controller: FixtureAddController, templateUrl: '/Content/Templates/FixtureAddEdit.html' }).
when('/Admin/Fixtures/Edit/:fixtureId', { controller: FixtureEditController, templateUrl: '/Content/Templates/FixtureAddEdit.html' }).
otherwise({ controller: TeamListController, redirectTo: 'Admin/Teams/List', templateUrl: '/Content/Templates/Teams.html' });
$locationProvider.html5Mode(true); //will use html5 mode rather than hashbang where available
});
var FixtureListController = function ($scope, $data) {
$scope.fixtures = [];
$scope.context = [];
$scope.selectedFixture = null;
$data.initService('http://lovelyjubbly.cloudapp.net/odata')
.then(function (context) {
$scope.context = context;
$scope.fixtures = context.Fixtures.include('Stage').include('HomeTeam').
include('AwayTeam').include('City').toLiveArray();
});
$scope.delete = function () {
//get id, can use this to get item from ng-repeat
var emp = new lovelyjubblyWebApi.Models.Fixture({ FixtureId: this.fixture.FixtureId });
$scope.context.Fixtures.remove(emp);
$scope.context.saveChanges();
};
};
//crud controllers
var FixtureAddController = function ($scope, $data) {
$scope.fixtures = [];
$data.initService('http://lovelyjubbly.cloudapp.net/odata')
.then(function (context) {
$scope.context = context;
$scope.fixtures = context.Fixtures.toLiveArray();
$scope.teams = context.Teams.toLiveArray();
$scope.cities = context.Cities.toLiveArray();
$scope.stages = context.Stages.toLiveArray();
});
$scope.save = function () {
//prevents a separate post
$scope.fixture.entityState = $data.EntityState.Modified;
$scope.context.Fixtures.add($scope.fixture, true);
$scope.context.saveChanges();
//reset state
$scope.context.stateManager.reset();
};
};
var FixtureEditController = function ($scope, $data, $routeParams) {
$scope.context = [];
$scope.fixtures = [];
$scope.teams = [];
$scope.cities = [];
$scope.stages = [];
$scope.selectedFixture = null;
$scope.fixture = null;
$data.initService('http://lovelyjubbly.cloudapp.net/odata')
.then(function (context) {
$scope.context = context;
$scope.fixtures = context.Fixtures.include('Stage').include('HomeTeam').
include('AwayTeam').include('City').toLiveArray();
$scope.teams = context.Teams.toLiveArray();
$scope.cities = context.Cities.toLiveArray();
$scope.stages = context.Stages.toLiveArray();
var emp = new lovelyjubblyWebApi.Models.Fixture({ FixtureId: $routeParams.fixtureId });
$scope.context.Fixtures.filter('FixtureId', '==', $routeParams.fixtureId)
.forEach(function (item) {
emp.StageId = item.StageId;
emp.CityId = item.CityId;
emp.FixtureDate = item.FixtureDate;
emp.HomeTeamId = item.HomeTeamId;
emp.HomeTeamScore = item.HomeTeamScore;
emp.AwayTeamId = item.AwayTeamId;
emp.AwayTeamScore = item.AwayTeamScore;
}).then(function (e)
{
$scope.fixture = emp;
});
$scope.save = function () {
if ($scope.form.$valid) { //check for valid form
var todo = $scope.context.Fixtures.attachOrGet({ FixtureId: $routeParams.fixtureId });
todo.StageId = $scope.fixture.StageId;
todo.CityId = $scope.fixture.CityId;
//emp2.FixtureDate = $scope.fixture.FixtureDate;
todo.FixtureDate = "10/10/2014 00:00";
todo.HomeTeamId = $scope.fixture.HomeTeamId;
todo.HomeTeamScore = $scope.fixture.HomeTeamScore;
todo.AwayTeamId = $scope.fixture.AwayTeamId;
todo.AwayTeamScore = $scope.fixture.AwayTeamScore;
$scope.context.saveChanges();
} else {
alert("invalid form");
}
};
});
};
列表视图:
<table class="table table-striped table-condensed table-hover">
<thead>
<th>
Fixture Id
</th>
<th>
Fixture Date
</th>
<th>
Stage
</th>
<th>
City
</th>
<th>
Home Team
</th>
<th>
Score
</th>
<th>
Away Team
</th>
<th>
Score
</th>
</thead>
<tbody>
<tr ng-repeat="fixture in fixtures | orderBy:'FixtureId'" id="fixture_{{fixture.FixtureId}}">
<td>{{fixture.FixtureId}}</td>
<td>{{fixture.FixtureDate}}</td>
<td>{{fixture.Stage.StageName}}</td>
<td>{{fixture.City.CityName}}</td>
<td>{{fixture.HomeTeam.TeamName}}</td>
<td>{{fixture.HomeTeamScore}}</td>
<td>{{fixture.AwayTeam.TeamName}}</td>
<td>{{fixture.AwayTeamScore}}</td>
<td>
<a href="/Admin/Fixtures/Edit/{{fixture.FixtureId}}"><i class="glyphicon glyphicon-edit"></i></a>
<a ng-click="delete()"><i class="glyphicon glyphicon-remove"></i></a>
</td>
</tr>
</tbody>
</table>
添加/编辑视图:
<form name="form" class="col-xs-2" id="form" class="form-horizontal">
<div class="control-group" ng-class="{error: form.StageName.$invalid}">
<label class="control-label" for="StageName">Stage Team</label>
<div class="controls">
<select class="form-control" ng-model="fixture.StageId" ng-options="stage.StageId as stage.StageName for stage in stages" required>
<option style="display:none" value="">Select</option>
</select>
<span ng-show="form.StageName.$dirty && form.StageName.$error.required">Stage required</span>
</div>
</div>
<div class="control-group" ng-class="{error: form.CityName.$invalid}">
<label class="control-label" for="CityName">City</label>
<div class="controls">
<select class="form-control" ng-model="fixture.CityId" ng-options="city.CityId as city.CityName for city in cities" required>
<option style="display:none" value="">Select</option>
</select>
<span ng-show="form.CityName.$dirty && form.CityName.$error.required">City required</span>
</div>
</div>
<div class="control-group" ng-class="{error: form.FixtureDate.$invalid}">
<label class="control-label" for="BirthDate">Fixture Date</label>
<div class="controls">
<input type='text' class="form-control" ng-model="fixture.FixtureDate" name='FixtureDate' title="FixtureDate" />
</div>
</div>
<div class="control-group" ng-class="{error: form.HomeTeamName.$invalid}">
<label class="control-label" for="HomeTeamName">Home Team</label>
<div class="controls">
<select class="form-control" ng-model="fixture.HomeTeamId" ng-options="team.TeamId as team.TeamName for team in teams" required>
<option style="display:none" value="">Select</option>
</select>
<span ng-show="form.HomeTeamName.$dirty && form.HomeTeamName.$error.required">Home Team required</span>
</div>
</div>
<div class="control-group" ng-class="{error: form.HomeTeamScore.$invalid}">
<label class="control-label" for="HomeTeamScore">Home Team Score</label>
<div class="controls">
<input type="text" class="form-control" placeholder="Score" ng-model="fixture.HomeTeamScore" id="HomeTeamScore" name="HomeTeamScore" />
</div>
</div>
<div class="control-group" ng-class="{error: form.AwayTeamName.$invalid}">
<label class="control-label" for="AwayTeamName">Away Team</label>
<div class="controls">
<select class="form-control" ng-model="fixture.AwayTeamId" ng-options="team.TeamId as team.TeamName for team in teams" required>
<option style="display:none" value="">Select</option>
</select>
<span ng-show="form.AwayTeamName.$dirty && form.AwayTeamName.$error.required">Away Team required</span>
</div>
</div>
<div class="control-group" ng-class="{error: form.AwayTeamScore.$invalid}">
<label class="control-label" for="AwayTeamScore">Away Team Score</label>
<div class="controls">
<input type="text" class="form-control" placeholder="Score" ng-model="fixture.AwayTeamScore" id="AwayTeamScore" name="AwayTeamScore" />
</div>
</div>
<br />
<div class="form-actions">
<button ng-show="form.$valid" ng-click="save()" class="btn btn-primary">{{action}}</button>
<a href="/Admin/Fixtures/List" class="btn btn-danger">Cancel</a>
</div>
</form>
这有点棘手，因为我们没有看到进行选择、路由或如何调用控制器的代码。
然而，我相信只有一个实例的FixtureEditController正在被创建。您可以通过向FixtureEditController添加断点或控制台日志来测试这一点。
因此，调用:$data.initService('http://lovelyjubbly.cloudapp.net/odata')
和
var emp = new lovelyjubblyWebApi.Models.Fixture({ FixtureId: $routeParams.fixtureId });
只生成一次。
在编辑控制器中。您将需要检测路由参数何时更改，以便您可以采取行动。
$scope.routeParams = $routeParams;
$data.initService('http://lovelyjubbly.cloudapp.net/odata')
.then(function (context) {
$scope.$watch('$routeParams',function(routeParams){
// this should run on any change in routeParams (regardless of the current state)
},true);
我不确定观看routeParams是最好的方法，如果编辑控制器是从列表控制器继承的，那么你可以观看"selectedFixture"。