Comment utiliser une variable pour passer une clé d'objet dans une directive Angular ?

Question

J'utilise le Code Miroir pour formater les zones de texte en tant que code.

Ce qui fonctionne :

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

Vous pouvez configurer les options comme suit

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

et dans votre contrôleur :

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

Ce qui ne marche pas :

J'essaie de modifier dynamiquement les options de l'éditeur en fonction d'une autre partie du modèle (je prends en charge Javascript et Markdown).

Alors j'essaie ceci :

$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'
        }
    };

et ensuite ceci dans le 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>

Ma question est la suivante : comment puis-je utiliser la valeur du modèle de sélection (editorType) pour spécifier quel objet d'options est utilisé dans la directive miroir de code ?

J'ai essayé

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

en vain.

Quelqu'un sait-il quelle est la bonne façon de procéder ?

Merci beaucoup, beaucoup !

Mise à jour Je pense que c'est la syntaxe correcte :

ui-codemirror="editorOptions[editorType]".

Je pense qu'il y a un problème avec la directive qui ne réalise pas que la variable a changé.

Answer 1

Je ne pense pas que cela fonctionnera pour vous sans forker ui-codemirror. Le code dans UI-codemirror fait opts = angular.extend({}, options, scope.$eval(attrs.uiCodemirror)); au début, mais il ne surveille pas les mises à jour.

Si vous avez forké ui-codemirror de : https://github.com/angular-ui/ui-codemirror/blob/master/ui-codemirror.js et ensuite ajouté quelque chose comme

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) ??
  }
});

Dans ce cas, cela pourrait fonctionner, mais je ne l'ai pas testé et je n'ai aucune idée si cela fonctionne vraiment. Peut-être cela vous donnera-t-il une idée de la façon de créer la directive dont vous avez besoin.

Une autre alternative, qui serait considérablement plus lourde, serait d'instancier deux codemirrors et de passer de l'un à l'autre... mais je n'aime vraiment pas trop cette option.

Answer 2

En complément de la réponse de Jonathan :

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()} );
    }
  }
});