3

我正在使用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）的值来指定代码镜像指令中使用的选项对象？

我试过了

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

一切都无济于事。

有谁知道这样做的正确方法是什么？

非常感谢！

更新 我相信这是正确的语法：

ui-codemirror="editorOptions[editorType]".

我认为指令没有意识到变量已更改存在问题。

4

2 回答 2

3

如果不分叉 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) ??
  }
});

然后它可能会起作用，但我还没有测试过，所以我不知道它是否真的会起作用。也许这会让您了解如何创建所需的指令。

另一种选择会更重，是实例化两个代码镜像并在两者之间切换......但我真的不太喜欢这个选项。

于 2013-07-17T19:54:53.293 回答
1

添加到乔纳森的回复中：

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()} );
    }
  }
});
于 2014-02-06T05:30:46.147 回答