angular-editable-text ===================
npm install angular-editable-textangular-editable-text
===================
$ npm install angular-editable-text
2. include angular-editable-text.min.js & angular.editable-text.min.css in your project
3. include the module as a dependency of your app.
angular.module('myApp', ['gg.editableText'])
4. you are ready to use angular-editable-text!Usage
#### Basic:
To allow a line of text, for example, a title of your article editor, to be edited, simply add the "editable-text" attribute set to the relevant property on your model:
HTML:
Inside yourController.js:
$scope.myTitle='My Initial Title';
This will make your title editable on click. Note that whatever was inside your HTML tag will be transcluded and won't be affected by the dynamic editing part.
$3
Also, a "is-placeholder" class will be added so you can style it your own way (#2)
Credit goes to @mmaday!
$3
To automatically select all text when entering edit mode, add the "gg-select-all" attribute to the element.
$3
By default, hitting Enter/Return will call the on-change handler and blur the input field. To keep focus on
the input field after enter, add the 'gg-keep-focus' attribute to the element.
This only changes the behavior when hitting Enter.
#### Validating processing, and server requests
To validate content or perform a custom action, process it or send it to your server, you can pass a function as the
attribute, with value as its parameter.If the gg-on-change handler returns
undefined, the model will not be updated. This can be useful
for binding to a readonly property. The change handler can perform the actions to cause the readonly property to be
updated, for example, using a flux store as the model and calling a flux action in the change handler.Validation and processing example:
HTML:
`
yourController.js:
$scope.validate=function validateContent(value){
var deferred = $q.defer();
if (value.indexOf('red pinguins')==-1) {
alert('Title must contain red pinguins!');
deferred.reject();
} else {
deferred.resolve();
}
return deferred.promise;
}
Async request example:
The on-change function can also return a promise. If the gg-on-change handler returns a promise, the resolved value
will be used to update the model. If the promise is rejected, the model is reverted to its original value. If the
resolved value is
, then the model is not updated (see above).
HTML:
`
yourController.js:
$scope.saveToServer=function saveContent(value){
var dfd = $q.defer();
$timeout(function () {
var isOurServerAlive=(Math.random()<0 .7) //simulate an unstable server :);
if (isOurServerAlive) dfd.resolve(value);
else dfd.reject(); //rejecting the promise will cancel any changes
},1500); return d.promise;
}
While the promise is being resolved, the default behavior is to display an empty string. In the configuration section you can
learn how to change it.
#### Edit mode control
Sometimes you will need to manually invoke edit mode for a specific component, or to know when a component is being edited. For this purpose, you can bind the attribute "edit-mode" to a property in your model that will be bound 2-ways to the edit mode of a text item.
HTML:
The above h2 tag is being edited right now!
yourController.js:
$scope.myTitle="My Title";
$scope.$watch('isEditing',function(isEditing){
if (isEditing) console.log('My title is being edited!');
});
Configuration
To use a different template when a promise is waiting to be resolved, you can inject EditableTextHelperProvider to a config block as following (here I'm using a FontAwesome spinner instead):
.module('editableTextDemo', ['gg.editableText'])
.config(function (EditableTextHelperProvider) {
EditableTextHelperProvider.setWorkingText('');
});