使用ng-model动态禁用跨度

Question

我下面制作一个自定义编辑这个例子中<span>使用ngModelController: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#example

我现在要做的是能够通过指令内部的逻辑动态禁用对该字段的编辑.通过禁用它我的意思是用户根本无法编辑文本,它只会显示为常规文本.

这是一个样本plunkr:

来自plunkr的代码:

angular.module('app', [])


.controller('Ctrl', function ($scope) {
    $scope.stuff = "test";
  })
  .directive('contenteditable',
    function ($log) {
        'use strict';
        return {
            restrict: 'A',
            require: 'ngModel',
            scope: {
            },
            link: function ($scope, $element, $attributes, ngModel) {
                if (angular.isUndefined(ngModel)) {
                    $log.warn('ngModel is not defined');
                    return;
                }
                function read() {
                    ngModel.$setViewValue($element.text());
                }
                ngModel.$render = function () {
                    $element.html(ngModel.$viewValue || '');
                };
            }
        };
    }
);

任何帮助,将不胜感激.

Answer 1

感谢AngularJS的gitter.im房间里非常有帮助的人,我意识到这contentEditable是一个真正的html5 api,这就是使span元素可编辑的原因,而不是AngularJS.

我所要做的就是更改指令的名称并contentEditable动态删除.