Непоследовательное поведение в представлениях AngularJS, заполненных Jaydata

Question

Я пытаюсь создать приложение для проверки концепции, используя AngularJS и Jaydata. Я свободно следую шаблону MVC на домашней странице AngularJS ( http://angularjs.org/) в разделе "Подключить бэкэнд". Вместо Firebase я использую WebSQL через провайдеров Jaydata.

У меня есть база данных WebSQL под названием InspecTechDB с двумя таблицами: "Организации" и "Клиенты". Между 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 }
    });

У меня есть 3 представления шаблона: OrganizationIndex.html, CustomerIndex.html и CustomerEdit.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, и здесь я теряюсь. Представление выглядит просто отлично, но форма не привязана, когда представление загружено, и я понимаю, почему (я думаю). Похоже, что b / c angular связывает форму до того, как заполнится мой $ scope.customer. Доказательством этого является консольный журнал:

эта запись с / б после записи в консоли клиента bind.js:68

Покупатель

У меня такой вопрос: почему представления OrganizationList и 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;
            });
        });
    });

});

Answer 1

Angular понятия не имеет, что должна обновить форму. Когда вы звоните tolivearray, Jaydata управляет этим для вас. Вызов сингла не дает. Один из способов решения этой проблемы заключается в том, что вы звоните "Применить" самостоятельно, когда вы обновляете объем. Лучшим способом было бы передать объект вместо его загрузки, поскольку он уже загружен.