Question

我是angularjs的新手。在这里，我有一个表格，我使用contenteditable HTML5属性。现在，我有以下代码 -

<td class="td-report-field" contenteditable="disabledoneButton"
    contextmenu-item="report" context-menu="menuOptions">
  {{ report.attributes.field }}
</td>

这里我试图在disabledoneButton的基础上使用它。现在displayDoneButton的值是true，那么它也不会将该行作为可编辑的行。现在，我已经尝试使用contenteditable = 'true'然后它开始工作，但不是disabledoneButton的值。

我也有指令 -

 var contentEditable = [function () {
        return {
            restrict: 'A',
            require: '?ngModel',
            link: function(scope, element, attrs, ngModel) {
                if (!ngModel) {
                     return;
                } 
                ngModel.$render = function() {
                    element.html(ngModel.$viewValue || '');
                };

            ngModel.$render();

            // Listen for change events to enable binding
            element.bind('blur keypress keyup change', function() {
                scope.$apply(read);
            });
            // Write data to the model
            function read() {
                ngModel.$setViewValue(element.html());
            }
        }
    };
    }];

任何人都可以帮我解决这个问题吗？提前谢谢。

Answer 1

要提供与属性值的数据绑定，请使用interpolation markup：

contenteditable="{{disabledoneButton}}"

来自the docs：

在编译过程中，compiler使用$interpolate   service以查看文本节点和元素属性是否包含   嵌入式表达式的插值标记。

如果是这种情况，编译器会向其添加interpolateDirective   在计算的插值函数上节点和寄存器watches，   这会将相应的文本节点或属性值更新为   正常digest cycle的一部分。

内容可编辑指令无法正常工作

1 个答案: