feat(ui-ace): Make the readonly option use double-curly expressions. C…

…lose #3.

README.md

@@ -95,6 +95,16 @@ The ng-model will be watched for to set the Ace EditSession value (by [setValue]
 
 _The ui-ace directive stores and expects the model value to be a standard javascript String._
 
+### Can be read only
+
+Simple demo
+```html
+<div ui-ace readonly="true"></div>
+or
+Check me to make Ace readonly: <input type="checkbox" ng-model="checked" ><br/>
+<div ui-ace readonly="{{checked}}"></div>
+```
+
 ### Ace instance direct access
 
 For more interaction with the Ace instance in the directive, we provide a direct access to it.

test/ace.spec.js

@@ -86,13 +86,25 @@ describe('uiAce', function () {
 
     describe('readOnly', function () {
       it('should read only option true', function () {
-        $compile('<div ui-ace="{readOnly:true}">')(scope);
-        expect(_ace).toBeDefined();
+        $compile('<div ui-ace readonly="true">')(scope);
+        scope.$apply();
+        expect(_ace.getReadOnly()).toBeTruthy();
+        $compile('<div ui-ace readonly="{{foo}}">')(scope);
+        scope.$apply("foo = true");
         expect(_ace.getReadOnly()).toBeTruthy();
       });
       it('should read only option false', function () {
         $compile('<div ui-ace>')(scope);
-        expect(_ace).toBeDefined();
+        scope.$apply();
+        expect(_ace.getReadOnly()).toBeFalsy();
+        $compile('<div ui-ace readonly="false">')(scope);
+        scope.$apply();
+        expect(_ace.getReadOnly()).toBeFalsy();
+        $compile('<div ui-ace readonly="{{foo}}">')(scope);
+        expect(_ace.getReadOnly()).toBeFalsy();
+        scope.$apply("foo = true");
+        expect(_ace.getReadOnly()).toBeTruthy();
+        scope.$apply("foo = false");
         expect(_ace.getReadOnly()).toBeFalsy();
       });
     });

ui-ace.js

@@ -72,9 +72,9 @@ angular.module('ui.ace', [])
           session.setMode("ace/mode/" + opts.mode);
         }
 
-        if (angular.isDefined(opts.readOnly)) {
-            acee.setReadOnly(opts.readOnly);
-        }
+        attrs.$observe('readonly', function (value) {
+          acee.setReadOnly(value === 'true');
+        });
 
         // Value Blind
         if (angular.isDefined(ngModel)) {