Как использовать переменную для передачи объектного ключа в Угловую директиву?

Question

Я использую директиву Code Mirror для форматирования текстовых областей в качестве кода.

Что работает:

<textarea ui-codemirror type="textarea" ng-model="x"></textarea> 

Вы можете установить опции вверх, как так

<textarea ui-codemirror="editorOptions" type="textarea" ng-model="x"></textarea> 

и в вашем контроллере:

$scope.editorOptions = { 
      name: 'javascript', 
      json: true, 
      smartIndent: false, 
      tabSize: 2, 
      lineWrapping : true, 
      lineNumbers: true, 
      mode: 'javascript' 
     } 

Что не работает:

Я пытаюсь динамически изменять editorOptions на основе другой части модели (я поддерживаю Javascript и Markdown).

Так что я пытаюсь это:

$scope.editorOptions = { 
     json: { 
      name: 'javascript', 
      json: true, 
      smartIndent: false, 
      tabSize: 2, 
      lineWrapping : true, 
      lineNumbers: true, 
      mode: 'javascript' 
     }, 
     markdown: { 
      name: 'markdown', 
      json: false, 
      smartIndent: false, 
      tabSize: 2, 
      lineWrapping : true, 
      lineNumbers: true, 
      mode: 'markdown' 
     } 
    }; 

, а затем это в HTML:

<select ng-model='editorType' required ng-options='option.value as option.name for option in editorTypes'></select> 
<textarea ui-codemirror="editorOptions[editorType]" type="textarea" ng-model="x"></textarea> 

Мой вопрос это- Как я могу использовать значение выбора модели (editorType) в указать, какой объект опций используется в директиве mirror?

Я попытался

<textarea ui-codemirror="editorOptions.[editorType]" type="textarea" ng-model="x"></textarea> 
<textarea ui-codemirror="editorOptions[$scope.editorType]" type="textarea" ng-model="x"></textarea> 

все безрезультатно.

Кто-нибудь знает, как правильно это сделать?

Многие, огромное спасибо!

Update Я считаю, что это правильный синтаксис:

ui-codemirror="editorOptions[editorType]". 

Я думаю, что есть проблема с директивой не понимая переменную изменилась.

Answer 1

Я не думаю, что это сработает для вас без наложения ui-codemirror. Код в UI-codemirror делает opts = angular.extend({}, options, scope.$eval(attrs.uiCodemirror)); в начале, но он не следит за обновлениями.

Если вы раздвоенный UI-CodeMirror от: https://github.com/angular-ui/ui-codemirror/blob/master/ui-codemirror.js, а затем добавил что-то вроде

attrs.$observe('uiCodemirror', function (newVal, oldVal) { 
    if (newVal !== oldVal) { 
    opts = angular.extend({}, options, scope.$eval(attrs.uiCodemirror)); 
    codeMirror = CodeMirror.fromTextArea(elm[0], opts); //or maybe $timeout(deferredCodemirror) ?? 
    } 
}); 

Тогда это могло бы работать, но я не проверял, что таким образом я понятия не имею, если это действительно будет работать. Возможно, это даст вам представление о том, как создать необходимую вам директиву.

Другая альтернатива, которая была бы значительно тяжелее, заключалась бы в создании двух кодовых копий и переключении между ними ... но мне действительно не нравится эта опция слишком много.

Answer 2

Добавление к ответу Джонатана:

attrs.$observe('uiCodemirror', function (newVal, oldVal) 
{ 
    if(newVal !== oldVal) 
    { 
    opts = angular.extend({}, options, scope.$eval(attrs.uiCodemirror)); 
    var keys = Object.keys(opts) 
    if(keys.length != 0) 
    { 
     keys.forEach(function(i) 
     { 
     var v = opts[i]; 
     codeMirror.setOption(i, v); 
     }); 

     $timeout(function() { codeMirror.refresh()}); 
    } 
    } 
});