使用Jaydata填充的AngularJS视图中的不一致行为

Question

我正试图使用AngularJS和Jaydata构建一个概念验证应用程序。我大致遵循AngularJS主页上的MVC模式(http://angularjs.org/)在"；连接后端"；。我通过Jaydata提供程序使用WebSQL，而不是Firebase。

我有一个名为InsictTechDB的WebSQL数据库，它有两个表，Organizations和Customers。两者在OrganizationID上存在父/子关系。这是我的型号：

$data.Entity.extend('Customer', {
'CustomerID': { 'key': true, 'type': 'Edm.Guid', 'nullable': false },
'OrganizationID': { 'type': 'Edm.Guid', 'nullable': false, 'required': true },
'CustomerName': { 'type': 'Edm.String' },
'Organization': { 'type': 'Organization', 'inverseProperty': '$$unbound' }
});
$data.Entity.extend('Organization', {
'OrganizationID': { 'key': true, 'type': 'Edm.Guid', 'nullable': false, 'required': true },
'OrganizationName': { 'type': 'Edm.String' },
'Customers': { 'type': 'Array', 'elementType': 'Customer', 'inverseProperty': '$$unbound' }
});
$data.EntityContext.extend('InspecTechDB', {
'Customers': { type: $data.EntitySet, elementType: Customer },
'Organizations': { type: $data.EntitySet, elementType: Organization }
});

我有三个模板视图：OrganizationIndex.html、CustomerIndex.html和CustomerEdit.html

<form name="myForm">
<div class="form-group">
<label>OrganizationID</label>
<input type="text" class="form-control" placeholder="OrganizationID" name="OrganizationID" ng-model="customer.OrganizationID" required>
<span ng-show="myForm.name.$error.required" class="help-inline">
Required
</span>
</div>
<div class="form-group" ng-class="{error: myForm.name.$invalid}">
<label>Name</label>
<input type="text" class="form-control" name="CustomerName" ng-model="customer.CustomerName" required>
<span ng-show="myForm.name.$error.required" class="help-inline">
Required
</span>
</div>
</form>

我在这里包含了我的整个js文件：

var app = angular.module('AngularJaydataApp', ['ngRoute', 'jaydata']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'OrganizationIndex',
templateUrl: 'OrganizationIndex.html'
})
.when('/CustomerIndex/:id', {
controller: 'CustomerIndex',
templateUrl: 'CustomerIndex.html'
})
.when('/CustomerEdit/:id', {
controller: 'CustomerEdit',
templateUrl: 'CustomerEdit.html'
})
.otherwise({
redirectTo: '/'
});
});
var localDB = new InspecTechDB({
name: 'local',
databaseName: 'InspecTech'
});
app.controller('OrganizationIndex', function ($scope, $data){    
//wait until the localDB is ready, then get the Organizations
$.when(localDB.onReady())
.then(function () {
$scope.inspectechdb = localDB;
$scope.organizations = localDB.Organizations.toLiveArray();
});

});
app.controller('CustomerIndex', function ($scope, $data, $routeParams) {
$.when(localDB.onReady())
.then(function () {
$scope.inspectechdb = localDB;
$scope.Customers = $scope.inspectechdb
.Customers
.filter('OrganizationID', '==', $routeParams.id)
.toLiveArray();
});
});
app.controller('CustomerEdit', function ($scope, $data, $routeParams) {
var customerID = $routeParams.id;
$.when(localDB.onReady())
.then(function () {
$scope.inspectechdb = localDB;
$scope.inspectechdb.Customers.single(function (customer) {
return customer.CustomerID == this.Id;
},
{Id: customerID},
function (customer) {
$scope.customer = customer;
console.dir(customer);
});
});
console.log('this entry s/b after the customer console entry');

});

我可以成功地导航到每个视图，并从数据库中填充OrganziationList.html模板，如上面的代码所示。我已经设置了"组织"列表，这样当我单击视图上的"组织"条目时，就会加载CustomerIndex.html视图并将其绑定到我的客户列表。这很好用。我还设置了它，这样当我在CustomerIndex视图上单击一个客户条目时，就会加载CustomerEdit.html视图，这就是我迷路的地方。视图看起来很好，但加载视图时表单没有绑定，我理解原因(我认为)。在填充我的$scope.customer之前，似乎b/c angular正在绑定表单。控制台日志证明了这一点：

此条目s/b在客户控制台条目绑定之后。js:68

客户

我的问题是：为什么OrganzationList和CustomerList视图正确填充，而CustomerEdit表单却没有填充，对此可以做些什么？

更新对于任何感兴趣的人，我通过根据接受的答案修改CustomerEdit控制器来实现它：

app.controller('CustomerEdit', function ($scope, $data, $routeParams) {
var customerID = $routeParams.id;
$.when(localDB.onReady())
.then(function () {
$scope.inspectechdb = localDB;
$scope.inspectechdb.Customers.single(function (customer) {
return customer.CustomerID == this.Id;
},
{ Id: customerID },
function (customer) {
$scope.$apply(function () {
$scope.customer = customer;
});
});
});
});