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

Question

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

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

这里我尝试在disabledoneButton的基础上使用这个。现在 displayDoneButton 的值是 true 然后它也没有将该行作为 editable。现在，我已经尝试使用 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：

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.

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

Content-Editable Directive is not working properly

html

javascript

contenteditable

angularjs

angularjs-directive