0.3.5 - don't do anything for contenteditable without an ngModel

angular-contenteditable.js

@@ -1,8 +1,19 @@
+/**
+ * @see http://docs.angularjs.org/guide/concepts
+ * @see http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController
+ * @see https://github.com/angular/angular.js/issues/528#issuecomment-7573166
+ */
+
 angular.module('contenteditable', [])
   .directive('contenteditable', ['$timeout', function($timeout) { return {
-    require: 'ngModel',
+    restrict: 'A',
+    require: '?ngModel',
     link: function($scope, $element, attrs, ngModel) {
-      var old_render
+      // don't do anything unless this is actually bound to a model
+      if (!ngModel) {
+        return
+      }
+
       // view -> model
       $element.bind('input', function(e) {
         $scope.$apply(function() {
@@ -35,11 +46,11 @@ angular.module('contenteditable', [])
       })
 
       // model -> view
-      old_render = ngModel.$render
+      var oldRender = ngModel.$render
       ngModel.$render = function() {
         var el, el2, range, sel
-        if (!!old_render) {
+        if (!!oldRender) {
-          old_render()
+          oldRender()
         }
         $element.html(ngModel.$viewValue || '')
         el = $element.get(0)

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-contenteditable",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "main": "angular-contenteditable.js",
   "ignore": [
     ".*",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-contenteditable",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "angular extensions",
   "main": "angular-contenteditable.js",
   "directories": {

test/fixtures/simple.html

@@ -8,11 +8,9 @@
     <script src="../../angular-contenteditable.js"></script>
     <script>
 angular.module('simple', ['contenteditable'])
-.controller('Ctrl', function($scope) {
+  .controller('Ctrl', function($scope) {
-  $scope.model = "Initial stuff <b>with bold</b> <em>and italic</em> yay"
+    $scope.model = "Initial stuff <b>with bold</b> <em>and italic</em> yay"
-})
+  })
-.controller('Ctrl2', function($scope) {})
-
 angular.bootstrap(document, ['simple'])
     </script>
   </head>
@@ -26,9 +24,18 @@ angular.bootstrap(document, ['simple'])
         <label>Model:</label>
         <pre id="output" onclick="console.log('clicked the output')">{{ model }}</pre>
       </div>
-     </div>
+      <hr>
-    <div ng-controller="Ctrl2">
+      <div contenteditable>Edit me - I don't affect anything</div>
-      The other controller
+      <hr>
+      <div id="i1" contenteditable="true" ng-model="model"></div>
+      <hr>
+      <div id="i2" contenteditable="TRUE" ng-model="model"></div>
+      <hr>
+      <div id="i3" contenteditable="tRuE" ng-model="model"></div>
+      <hr>
+      <div id="i4" contenteditable="tRUe" ng-model="model"></div>
+      <hr>
+      <div id="i5" contenteditable="f" ng-model="model"></div>
     </div>
   </body>
 </html>