Question

尝试使用AngularJS的标签获取Codemirror的实例。

<p ng-bind-html="tab.content | unsafe"></p>是我插入textArea的地方：

<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标签以插入textarea：

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()，但即使这样，您也无法绑定到范围内的cmOption。

我认为您最好的选择是将textarea直接添加到您的视图中。并将文本添加到范围的模型中。

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

目前还不完全清楚你要做什么。如果您将代码发布到您致电formatText(text)的地方，也许我可以改进我的答案。

修改

我稍微调整了一下我的答案。我认为您需要将cmModel / text属性作为选项卡对象的一部分，因此每个选项卡都有自己的值。我仍然希望看到你在formatText使用的地方。

Codemirror的Onload函数

1 个答案: