CODEWITHSUNDEEP
javascriptangularjshtmlangularjs-directivecontenteditable
ganesh kaspate
ganesh kaspate

Reputation: 2685

Content-Editable Directive is not working properly

I am new to angularjs . Here, I have a table and I am using contenteditable attribute of HTML5 . Now, I have a following code -

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

Here I am trying to use this on the basis of the disabledoneButton . Now value of a displayDoneButton is true then also it is not making that row as a editable. Now, I have tried it by using contenteditable = 'true' then it starts working , but not on the value of a disabledoneButton.

I have a directive as well -

 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());
            }
        }
    };
    }];

Can any one please help me to solve this issue ? Thanks in advance.

Upvotes: 3

Views: 317

Answers (1)

Stanislav Kvitash
Stanislav Kvitash

Reputation: 4622

To provide data-binding to attribute values use interpolation markup as:

contenteditable="{{disabledoneButton}}"

From 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.

Upvotes: 2

Related Questions