Fix placeholder for CodeMirror directives

src/controllers/code-editor.js

@@ -93,9 +93,15 @@ define(function (require) {
                 lineNumbers: true,
                 lineWrapping: true,
                 matchBrackets: true,
-                autoCloseBrackets: true
+                autoCloseBrackets: true,
             });
 
+            // CodeMirror would set 'placeholder` value at construction time based on the string value of placeholder attribute in the DOM
+            // Thus, set the correct placeholder value in case value is angular expression.
+            if (angular.isString($scope.placeholder)) {
+                doc.setOption('placeholder', $scope.placeholder);
+            }
+
             warningRuler = doc.annotateScrollbar('CodeMirror-vertical-ruler-warning');
             errorRuler = doc.annotateScrollbar('CodeMirror-vertical-ruler-error');
 

src/controllers/dsl-editor.js

@@ -149,6 +149,13 @@ define(function(require) {
 		    lineNumbers: true,
 		    lineWrapping: true
 		});
+
+		// CodeMirror would set 'placeholder` value at construction time based on the string value of placeholder attribute in the DOM
+		// Thus, set the correct placeholder value in case value is angular expression.
+		if (angular.isString($scope.placeholder)) {
+			doc.setOption('placeholder', $scope.placeholder);
+		}
+		
 		doc.on('change', function () {
 			if (enableTextToGraphSyncing) {
 				$scope.definition.text = doc.getValue();

src/directives/code-editor.js

@@ -27,7 +27,8 @@ define(function () {
                 language: '=codeLanguage',
                 text: '=codeText',
                 decodeFunction: '&',
-                encodeFunction: '&'
+                encodeFunction: '&',
+                placeholder: '@'
             }
         };
     }];

src/directives/dsl-editor.js

@@ -16,7 +16,7 @@
 define(function () {
     'use strict';
 
-    return [function () {
+    return ['$interpolate', function ($interpolate) {
         return {
             restrict: 'A',
             scope: true,
@@ -25,6 +25,9 @@ define(function () {
                 if (attrs.contentAssistServiceName) {
                     scope.contentAssistServiceName = attrs.contentAssistServiceName;
                 }
+                if (attrs.placeholder) {
+                    scope.placeholder = $interpolate(attrs.placeholder)(scope);
+                }
                 scope.init(element.context);
             }
         };

src/directives/generic-dsl-editor.js

@@ -17,6 +17,7 @@ define(function () {
     'use strict';
 
     var _ = require('underscore');
+    var angular = require('angular');
 
     return [ function() {
 
@@ -36,7 +37,8 @@ define(function () {
             scope: {
                 dsl: '=',
                 hint: '=',
-                lint: '='
+                lint: '=',
+                placeholder: '@'
             },
             link: function (scope, element, attrs) {
 
@@ -62,6 +64,12 @@ define(function () {
 
                 doc = CodeMirror.fromTextArea(element.context, options);
 
+                // CodeMirror would set 'placeholder` value at construction time based on the string value of placeholder attribute in the DOM
+                // Thus, set the correct placeholder value in case value is angular expression.
+                if (angular.isString(scope.placeholder)) {
+                    doc.setOption('placeholder', scope.placeholder);
+                }
+
                 var dslChangedHandler = function () {
                     scope.$apply(function() {
                         scope.dsl = doc.getValue();