代码镜像不适用于角度 js 绑定变量答案

【问题标题】：Code mirror not working with angular js binding variable代码镜像不适用于角度 js 绑定变量
【发布时间】：2018-01-24 00:52:51
【问题描述】：

HTML：

<body ng-app ng-controller="OrderFormController">
<!--<h1 class="errorHeader">List of Classes</h1>-->
<header>
    <div class="container">
        <div id="branding">
            <h1>Apex  <span class="highlight"> Editor </span> </h1>

        </div>

    </div>
</header>
<div class="col-md-12 col-lg-12">
    <div class="panel with-nav-tabs panel-default">
        <div class="panel-heading">
            <ul class="nav nav-tabs">
                <li class="active"><a href="#tab1default" data-toggle="tab">Apex Editor</a></li>
            </ul>
        </div>
        <div class="panel-body">
            <div>
                <input type="text" name="apexClass" id="autocomplete" placeholder="Type the name of the Apex class you want to edit"/>
            </div>
            <div class="btn-group-vertical" style="padding: 1%">
                <button type="button" class="btn btn-primary" id="editBtn">Edit</button>
                </button>
            </div>
            <div class="tab-content" align="left">

                <div id='error' style='display:none'>{{apexClassWrapperError.message}}</div>

                <div>{{apexClassWrapper.name}}</div>
                <img src="../img/ajax-loader.gif" id="loaderImage" style='display:none'>
                <form>
                    <textarea ng-model="apexClassWrapper.body" id="code" name="code" readonly="true" >{{apexClassWrapper.body}}</textarea>
                </form>


            </div>
            <button type="button" class="btn btn-primary" id="saveBtn" ng-click="postdata(apexClassWrapper)">Save</button>
        </div>
    </div>
</div>
<script src="../js/makeEditable.js"></script>
<script>

    $(function() {
        var editor = CodeMirror.fromTextArea(document.getElementById("code"),{
            linenumber : true,
            matchBrackes: true,
            mode: "text/x-apex"
        })

    });
</script>


<footer>
    <p>Web based Apex Editor</p>
    <p>Developed By - Nagendra Kumar Singh</p>
</footer>
</body>

顶部包含的 CSS 和 JS 文件：

<script src="../js/codemirror.js"></script>
<script src="../js/apex.js"></script>
<script src="../js/matchbrackets.js"></script>
<link href="../css/codemirror.css" rel="stylesheet"/>

控制器是一个通过 RESTApi 获取类的简单控制器。

function OrderFormController($scope, $http) {

    $('#autocomplete').autocomplete({
        type: 'POST',
        serviceUrl: 'http://localhost:8989/getSuggestion',
        onSelect: function (suggestion) {
            console.log('suggestion.value -> '+suggestion.value);

            var data = {
                apexClassName:suggestion.value
            };

            var config = {
                params: data
            };

            $('#loaderImage').show();
            $http.get("http://localhost:8989/getApexBody",config).then(function (response) {
                $scope.apexClassWrapper = response.data;
                 $('#loaderImage').hide();
            });
        }
    });

};

但我只能在我的文本区域看到{{apexClassWrapper.body}}，使用 CodeMirror 时看不到真实代码，如果我删除代码镜像，我可以看到类，但我无法找到显示正文的方法包括 CodeMirror。控制台日志中没有错误，并且所有 JS 和 CSS 文件都已完美加载。请帮忙。

【问题讨论】：

标签： javascript html angularjs codemirror

【解决方案1】：

好的，所以我想我可能已经想通了。我所做的是我在js文件中为codemirror代码设置了一个超时运行，并将其从index.html中删除。

$('#loaderImage').show();
        $http.get("http://localhost:8989/getApexBody", config).then(function (response) {
            $scope.apexClassWrapper = response.data;
            $('#loaderImage').hide();
            if(globalEditor) {
                globalEditor.toTextArea();
            }
            setTimeout(function (test) {
                var editor = CodeMirror.fromTextArea(document.getElementById('apexBody'), {
                    lineNumbers: true,
                    matchBrackets: true,
                    mode: "text/x-apex"
                });

                globalEditor =  $('.CodeMirror')[0].CodeMirror;
            }), 2000
        });

这个答案的唯一问题是，当我尝试加载不同的类时，它会创建多个代码编辑器窗口。我该如何解决？

所以终于让它工作了，定义了一个全局变量并使用方法toTextArea

【讨论】：