javascript - Codemirror的Onload功能

Question

尝试使用 AngularJS 的选项卡获取 Codemirror 的实例。

<p ng-bind-html="tab.content | unsafe"></p>是我插入文本区域的位置:

<tabset class="tab-container">
    <tab id = "tabContent" ng-repeat="tab in tabs" active="tab.active"> 
      <script>

      </script>
      <tab-heading>
      <span>{{tab.title}}</span>
      <i class="glyphicon glyphicon-remove" ng-click="removeTab($event, $index)"></i> <!-- the tab close button -->
    </tab-heading>
    <p ng-bind-html="tab.content | unsafe"></p>
  </tab>
  <button class="btn btn-default" ng-click="addTab()"></button>
</tabset>

当我添加 tab.Content 时，我首先在文本周围添加 HTML 标签，以便插入文本区域:

var formatText = function(text){
        return "<textarea ui-codemirror='cmOption' ng-model='cmModel'>" + text + "</textarea>";

    }

ui-codemirror = 'cmOption' 触发此操作:

$scope.cmOption = {
    lineNumbers: true,
    indentWithTabs: true,
    onLoad : function(_cm){
        console.log("loaded");
        $scope.modeChanged = function(){
            console.log("loaded");

            _cm.setOption("mode", $scope.mode.toLowerCase());
        };
    }
};

当我在 $scope.cmOption 处添加断点时，它成功了。但是当我在 onLoad 函数中添加断点时，它永远不会到达。

感谢您阅读这篇长文，并尽力提供帮助:(

Answer 1

ng-bind-html 不会从您的字符串编译 ui-codemirror 指令。
为此，您可以使用 $sce.trustAsHtml()，但即使如此，您也无法绑定(bind)到作用域上的 cmOption。

我认为最好的选择是将文本区域直接添加到您的 View 中。并将文本添加到示波器的模型中。

<p>
    <textarea ui-codemirror='cmOption' ng-model='tab.cmModel'></textarea>
</p>

尚不完全清楚您想要做什么。如果您在调用 formatText(text) 的地方发布代码，也许我可以改进我的答案。

编辑:

我稍微调整了我的答案。我认为您需要 cmModel/text 属性作为选项卡对象的一部分，以便每个选项卡都有自己的值。不过，我仍然想看看您在哪里使用 formatText。