Question

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文件都完美加载。请帮忙。

Answer 1

好的，所以我想我可能已经弄明白了。我所做的是设置codemirror代码的超时，以便在js文件中如下运行，并将其从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

代码镜像不使用角度js绑定变量

1 个答案: