Question

我正在尝试创建一个可编辑的网格，其中有一个可编辑的dateField。仅当Cell聚焦时，单元格才会显示为可编辑

$scope.gridOptions = {
            data: 'result',
            enableCellSelection: true,
            enableRowSelection: false,
            enableCellEditOnFocus: true,
            multiSelect: false, 
            columnDefs: [
              { field: 'name',      displayName: 'Name',                enableCellEdit: false,  width: 60 },
              { field: 'age',       displayName: 'Age',                 enableCellEdit: false,  width: 60 },
              { field: 'sex',       displayName: 'Sex',                 enableCellEdit: false,  width: 90 },
              { field: 'dob',       displayName: 'DOB',                 width: 150,
                  editableCellTemplate: '<input type="text" datepicker-popup="dd/MM/yyyy" is-open="true" ng-input="COL_FIELD" ng-model="COL_FIELD" datepicker-append-to-body=true />',


              }                                  
            ]
          };

在editableCellTemplate中，如果我没有使用is-open="true"，则弹出窗口不会出现。如果我没有使用ng-input="COL_FIELD"，则不会从任何单元格中移除焦点。因此，datepicker没有被隐藏。但是如果我同时使用两者，则不会选择值。在控制台中，错误显示Expression 'true' used with directive 'datepickerPopup' is non-assignable!

对于stackoverflow，有很多问题。我几乎尝试了所有，但没有成功。

可以做些什么？我该如何删除错误？请给我一个工作的plunker。我不能用plunker创建这个问题。

修改

我想，我无法删除错误。错误仍然相同

Expression 'true' used with directive 'datepickerPopup' is non-assignable!

我该如何删除它？删除后，我相信它会起作用。我尝试将其作为范围变量并引用它，但是当我使用Inspect元素检查它时，值不会被替换为true。如果我将它用作变量并将模板中的值连接起来'is-open="' + $scope.dateFormat.opened + '"'，那么仍然存在相同的错误。

修改2

这个is-open用于什么？在某个地方我看到它的值等于true，只有opened。在其中一个示例中，here in Stackoverflow只有opened1和opened2。这是什么？以及如何使用它？

我已使用bcombs技术

删除了错误

编辑3

经过进一步调试后，我发现，datePicker正在打开（如果我使用的是bcombs提到的方法）但是，它会在打开时立即关闭。

     $scope.$on('ngGridEventStartCellEdit', function () {
         debugger;
     });

编辑4 从更多的操纵，我得出的结论是如果使用ng-input，则会破坏双向绑定。即如果您更改日期值文本字段，则在datePicker中将反映它，但如果您尝试使用datePicker更改该值，则它将不会反映在textField中。

如果删除ng-input，则此双向绑定仍然正确，因此可以正常工作，但这会导致ngGridEventEndCellEdit事件未被触发。所以，重点不是迷路。值已被选中，datePicker将被关闭（如果是enableCellEditOnFocus:true，我使用enableCellEdit:true），但焦点仍然在textField上..

需要帮助。希望更新有助于解决问题

Answer 1

我没有关于bootstrap指令或角度实现的专家......但是要直接回答如何删除错误的问题：

我非常确定is-open属性不能是原始值。它必须是一个变量，它将保持此特定小部件是否打开的（布尔）状态。在我的代码中，我使用单个对象为我的所有日期选择器保存这些标志，例如：

openDatePickers：{}

然后，在cellTemplate字符串中，我给它一个唯一的id，如：

＆＃39;是开放=＆＃34; openDatePickers [\＆＃39; DOB _ {{row.entity.name}} \＆＃39;]＆＃34; ＆＃39;

（请注意，我使用＆＃34; name＆＃34;属性来匹配您的示例，但首选唯一ID。）

编辑以回复评论：
celltemplate可以访问其控制器范围，因此最简单的方法是简单地声明：
$ scope.openDatePickers = {};

至于它是如何工作的，它取决于您使用的代码库我使用angular-ui，在第1140行的ui-bootstrap-tpls-0.8.0.js中，你可以看到指令管理＆＃34; is-open＆＃34;属性。
如果未提供该属性，则该指令在内部使用闭包来管理此标志，但在提供属性IS时行为不同。在两种情况下，赋值的工作方式都很简单：变量（无论是内部闭包还是属性中提供的变量）只是在状态之间切换。

编辑以响应您的调试
至关重点：我不使用ng-input或enableCellEditOnFocus。我用的是：
enableCellSelection：true
...而且我们的客户不希望允许对该字段进行手动编辑，因此我的输入元素具有：
NG-只读=＆＃34;真＆＃34;

只要您的用例不要求您允许手动编辑输入字段，这应该是您的问题的功能解决方法。

具有角度JS问题的Bootstrap Datepicker（再次）

1 个答案: