Jaydata로 채워진 AngularJS보기의 일관되지 않은 동작

Question

AngularJS 및 Jaydata를 사용하여 개념 증명 신청서를 작성하려고합니다. 나는 느슨하게 AngularJS 홈 페이지 (http://angularjs.org/)의 MVC 패턴을 "Back up a Backend"아래에있다. Firebase 대신 Jaydata 제공 업체를 통해 WebSQL을 사용하고 있습니다.

두 개의 테이블, 조직 및 고객이있는 InspecTechDB라는 WebSQL 데이터베이스가 있습니다. 이 둘 사이에는 OrganizationID의 상위/하위 관계가 있습니다. 이것은 나의 모델이다 OrganizationIndex.html, CustomerIndex.html 및 CustomerEdit.html :

$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 템플릿의 전망을 감상하실 수 있습니다. 여기 내 전체의 js 파일을 포함 시켰습니다

<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> 

:

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'); 

}); 

내가 성공적으로 각보기로 이동 한 다음를 채울 수있는 CustomerEdit.html 내가 문제가 있습니다 하나입니다 OrganziationList.html 위의 코드에 표시된대로 내 데이터베이스의 템플릿. 조직 목록을 설정하여 내보기에서 조직 항목을 클릭하면 CustomerIndex.html보기가로드되고 고객 목록에 바인딩됩니다. 이것은 잘 작동합니다. 또한 CustomerIndex 뷰에서 고객 항목을 클릭하면 CustomerEdit.html 뷰가로드되고 여기에 내가 잃어 버릴 수 있도록 설정했습니다. 뷰는 잘 보이지만 뷰가로드 될 때 폼이 바인딩되지 않으며 왜 (나는) 생각하는지 이해합니다. 그것은 b/c 각도 내 $ scope.customer 채워집니다 전에 양식 바인딩 것 같습니다. 고객 콘솔 항목 bind.js 후

이 항목 S/B : 68

고객

내 질문은 이것이다 : 이렇게 왜 OrganzationList이의 증거는 콘솔 로그입니다 CustomerList보기가 올바르게 채워지고 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

각도는 양식을 업데이트해야한다는 생각이 없습니다 : 관심있는 사람들을위한

UPDATE , 나는 그것을 허용 대답 당 CustomerEdit 컨트롤러를 수정하여 작업을했다. 당신이 tolivearray를 부를 때 jaydata가 이것을 관리합니다. 싱글 전화는하지 않습니다. 해결 방법 중 하나는 범위를 업데이트 할 때 직접 적용을 호출하는 것입니다. 더 좋은 방법은 이미로드되었으므로로드하는 대신 엔티티를 전달하는 것입니다.