When I use this component in dev-mode it is fine. But when it is minified, it cause the app to fail.

Simply put, IE10 isn't updating the model when the contenteditable div is edited. The template code in question is:

<div class="profile-label" ng-model="item.label" contenteditable="true"></div>
<div class="profile-description" ng-model="item.description" contenteditable="true"></div>

edit: After further testing, it's just IE10.

just tested the contenteditable element with your newest code and not with the bower package, and suddenly there is no 'digest already in progress' error (I made a pull request for that)..

so can you please update the bower package! thank you!

I'm using ng-focus on my element:

    <div contenteditable="true"
          ng-model="target"
          ng-focus="showMeta()"
          ng-blur="saveIt()">
    </div>

Don't know why but I'm getting an error:
Error: [$rootScope:inprog] $digest already in progress

Its trivial, but it causes concat scripts to mess things up.

such as not to pollute the default contenteditable attribute. e.g. ngContenteditable.
Maybe incorporate the ngModel attribute value into ngContenteditable

for non-contenteditable sub-spans figure out the auto-selection process for nested spans.

Hi,
I'm not sure if this is an issue which is related to the module per se, but it even if not, maybe you have an idea what's going on here.

http://plnkr.co/edit/d0hZx45mvLzn3OCdLg4h?p=preview

Steps:

1. select & copy "heading"
2. paste it into the contenteditable field
3. When you have heading and paste it into contenteditable heading or p, out of nowhere completely new dom nodes are created for each paste element, not inside the contenteditable element, but as siblings to it.

Browser is FF25.

TypeError: Object [object Object] has no method 'get'
at ngModel.$render (/javascripts/lib/angular/angular-contenteditable.js:56:23)

When a page loads containing a div with the contenteditable attribue, angular-contenteditable throws a type error. If ng-model is removed from the div, angular-contenteditable doesn't return an error. If contenteditable="false", the error remains.

Happy to provide any additional info.

I have used like the code below and it's not working.

 <div class="list card listinfo" ng-repeat="(key,dtls)  in ddetails.details">
  <h2 contenteditable="true" ng-model="dtls.title"></h2>
   <p contenteditable="true"  ng-model="dtls.subtitle"></p>
  </div>

I have also tried like this

   <div class="list card listinfo" ng-repeat="(key,dtls)  in ddetails.details">
      <h2 contenteditable="true" ng-model="ddetails.details[key].title"></h2>
       <p contenteditable="true"  ng-model="ddetails.details[key].subtitle"></p>
  </div>

Hello !

First, thanks for your work.

I saw you use npm to develop your module. No problem with that, but it is unfortunate that, consequently, it is not installable for ones that do not use bower but only npm.

Is it possible to change "install": "bower install" into "start": "bower install" ?

to make it behave like a text input element.
primarily for this: https://github.com/akatov/angular-supertypeahead

I've got
[10:29:49.912] "Error: Circular dependency:
getService@http://localhost:8081/lib/angular/angular.js:2884
invoke@http://localhost:8081/lib/angular/angular.js:2909
instantiate@http://localhost:8081/lib/angular/angular.js:2943
@http://localhost:8081/lib/angular/angular.js:5368
update@http://localhost:8081/lib/angular/angular.js:16188
Scope.prototype.$broadcast@http://localhost:8081/lib/angular/angular.js:9176
updateRoute/<@http://localhost:8081/lib/angular/angular.js:8201
qFactory/defer/deferred.promise.then/wrappedCallback@http://localhost:8081/lib/angular/angular.js:7509
qFactory/defer/deferred.promise.then/wrappedCallback@http://localhost:8081/lib/angular/angular.js:7509
qFactory/ref/<.then/<@http://localhost:8081/lib/angular/angular.js:7582
Scope.prototype.$eval@http://localhost:8081/lib/angular/angular.js:8926
Scope.prototype.$digest@http://localhost:8081/lib/angular/angular.js:8789
Scope.prototype.$apply@http://localhost:8081/lib/angular/angular.js:9012
done@http://localhost:8081/lib/angular/angular.js:10265
completeRequest@http://localhost:8081/lib/angular/angular.js:10449
createHttpBackend/</xhr.onreadystatechange@http://localhost:8081/lib/angular/angular.js:10407
"

this is the usage in the html

<div class="aboutBoxText"  >
  <span contenteditable="{{onMyPage}}"<!--also fails with just true here--> ng-model="user.bio" strip-br="true" select-non-editable="true">
  </span>
  <!--{{ user.bio }}//checking if this the problem-->
</div>

But it fails even when I don't use it in the html, just including it in the controller dependencies breaks the app. I also tried to include the dependency first in app.module, but then it fails with no 'contenteditable' module.

any clues?

Hi...your code works fine for me.

Can we have the feature that accepts the 'Tab' character inside
contenteditable div..

Thanks .

Unfortunately my work commitments don't leave me much time to carry on work on this project. I'm looking for volunteers to help me maintain it / take over development.

see e.g. http://akatov.github.io/angular-contenteditable/examples/simple.html

When you wrap any input with a <fieldset ng-disabled="true" /> input should be disabled. This does not happen with the contenteditable directive.

Hi, any plans to update the dependency of the unstable 1.1.5 to stable 1.2.0?
I know it just got released, but it helps me planning updating my sources ;)

Thanks!

In package.json the version is specified as 0.3.8. But the latest version on npm is 0.0.2.

npm publish should fix it.

Supports angularjs input directive analogs, such as:
{code}
<input
ng-model="string"
[name="string"]
[required="string"]
[ng-required="boolean"]
[ng-minlength="number"]
[ng-maxlength="number"]
[ng-pattern="string"]
[ng-change="string"]
[ng-trim="boolean"]>
...

{code}

https://docs.angularjs.org/api/ng/directive/input

I have seen this code in the project.

if (html === '') {
  // the cursor disappears if the contents is empty
  // so we need to refocus
  $timeout(function(){
    $element[0].blur()
    $element[0].focus()
  })
}

I tried to remove it and it does nothing, which browsers are targeted ?

Hey,

I use two different views and one of them contenteditable. When I start to type in contenteditable view on each space I see " ".

Any ideas what I can do with that?

Thanks,
Pavel

Would it be useful to run $sanitize on content of model when model->view, in order to avoid XSS? (I have posted a proposed pull request).

I discovered the following CodePen which works in IE10+ on BrowserStack:
http://gaboesquivel.com/blog/2014/in-place-editing-with-contenteditable-and-angularjs/

What's the reason this repo can't achieve similar compatibility?