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

Question

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

<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

要为属性值提供数据绑定(bind)，请使用 interpolation markup作为:

contenteditable="{{disabledoneButton}}"

来自 the docs :

During the compilation process the compiler uses the $interpolate service to see if text nodes and element attributes contain interpolation markup with embedded expressions.

If that is the case, the compiler adds an interpolateDirective to the node and registers watches on the computed interpolation function, which will update the corresponding text nodes or attribute values as part of the normal digest cycle.