使用 ng-model 动态禁用 span答案

【问题标题】：Dynamically disable a span with ng-model使用 ng-model 动态禁用 span
【发布时间】：2015-08-06 07:46:46
【问题描述】：

我正在按照此示例使用ngModelController 制作自定义可编辑<span>： 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 || '');
                };
            }
        };
    }
);

任何帮助将不胜感激。

【问题讨论】：

你想如何动态影响它？在父控制器的某处有一个真/假标志？
请看我的回答。我错过了一些非常明显的东西！ stackoverflow.com/a/31849962/1091665

标签： javascript angularjs angular-directive

【解决方案1】：

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

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

【讨论】：