I found a helpful guide on creating a custom editable <span> using ngModelController here:
https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#example
Now, I am looking to implement a feature that allows me to dynamically disable editing of the field through logic within the directive itself. When disabled, users should not be able to edit the text and it should simply display as regular text.
Check out this sample plunkr:
Code snippet from the 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 || '');
};
}
};
}
);
Any assistance with this would be greatly appreciated.