Data-GPS-Draggable 无法正确显示——AngularJS

Posted 2023-05-08

【中文标题】Data-GPS-Draggable 无法正确显示——AngularJS

【英文标题】：Data-GPS-Draggable Not Displaying Properly -- AngularJS

【发布时间】：2014-12-22 21:12:16

【问题描述】：

我能够在一个视图中成功地在两个表之间进行拖放。它每次都按应有的方式显示数据，除非您在页面加载后第一次尝试拖放。

AngularJS 中有哪些陷阱会导致这种情况？我一直无法找到解决方案。这是我的代码：

        function dropOnMch(dragEl, dropEl) 
        var dragScope = angular.element(dragEl).scope();
        var dropScope = angular.element(dropEl).scope();

        if (dragScope.planDesign) 
            var mchPlan = 
                CustomerNumber: vm.customer.CustomerNumber,
                PlanCode: dragScope.planDesign.PlanCode,
                ContractNumber: dragScope.planDesign.ContractNumber,
                PlanEffectiveDate: new moment().add('m', 1).startOf('month'),
                PlanStatusDate: new moment().add('m', 1).startOf('month'),
                ChangeEffectiveDate: vm.changeEffectiveDate,
                PlanStatus: 'A'
            

            var mch2 = replicatedDataService.createEntity('Mch2', mchPlan)
            vm.mchPlans.push(mch2);
                  

        $scope.$apply();
    

这是我的 html 表格：

        <table class="table " data-gps-droppable="vm.dropOnMch(dragEl, dropEl)">
        <thead>
            <tr>
                <th></th>
                <th>Customer Number</th>
                <th>PlanCode</th>
                <th>Contract Number</th>
                <th>Plan Effective Date</th>
                <th>Status</th>
                <th>Status Date</th>
                <th>Trust Number</th>
            </tr>
        </thead>
        <tr ng-repeat="plan in vm.mchPlans">
            <td><i class="fa fa-times" ng-click="vm.remove(plan)"></i></td>
            <td><span ng-bind="plan.CustomerNumber"></span></td>
            <td><span ng-bind="plan.PlanCode" />          </td>
            <td><span ng-bind="plan.ContractNumber" />    </td>
            <td><input type="date" ng-model="plan.PlanEffectiveDate" z-validate /> </td>
            <td><select ng-model="plan.PlanStatus" ng-options="status for status in vm.planStatuses" z-validate />        </td>
            <td><input type="date" ng-model="plan.PlanStatusDate" z-validate />    </td>
            <td><input type="text" ng-model="plan.TrustNumber" z-validate />       </td>
        </tr>

        <tr>
            <td colspan="99">Drop Plans Here to add them.</td>
        </tr>
    </table>

【参考方案1】：

答案是在执行任何推送操作之前放置一个元数据存储获取回调

 var manager = new breeze.EntityManager("api/breeze");

function fetchMetadata() 

    if (manager.metadataStore.isEmpty()) 
        return manager.fetchMetadata();
    

    return Q.resolve();