Question

我想制作一个文件编辑器。通过以下代码（JSBin），我们列出了左侧的所有文件名，右侧列出了它们的正文。我使用ui-codemirror来设置文件正文的样式。

然而，当我们点击文件名并从一个文件名切换到另一个文件名时，会不时地看到从文本区域到代码镜像帧的快速浏览，这对于编辑器来说不是一个好的体验

有没有人有解决方案来避免电影？另外，通过angularJS和ui-codemirror制作编辑器是一个好方向吗？

<html ng-app="flapperNews">
<head>
  <link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
  <script src="https://codemirror.net/lib/codemirror.js"></script>
  <script src="https://codemirror.net/mode/xml/xml.js"></script>
  <script src="https://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
  <script src="https://codemirror.net/mode/javascript/javascript.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>

  <script>
    var app = angular.module('flapperNews', ['ui', 'ui.router']);

    app.config(['$stateProvider', function ($stateProvider) {
      $stateProvider
        .state('file', {
          template: '<textarea ui-codemirror="editorOptionsHTML" ng-model="file.body"></textarea>',
          controller: 'FileCtrl',
          params: { name: null }
        })
    }]);

    app.controller('MainCtrl', ['$scope', '$state', function ($scope, $state) {
      $scope.files = [
        { name: "index.html", body: "<html><body>index.html</body></html>" },
        { name: "index.js", body: "the body of index.js" },
        { name: "test.html", body: "the body of test.html" }];
    }]);

    app.controller('FileCtrl', ['$scope', '$stateParams', function ($scope, $stateParams) {
      $scope.file = $scope.files.find(function (file) { return file.name === $stateParams.name });
      $scope.editorOptionsHTML = { mode: 'text/html', lineNumbers: true, matchBrackets: true };
    }]);
  </script>
</head>

<body ng-controller="MainCtrl">
  <div class="row">
    <div class="col-sm-3 col-md-3 col-xl-3 col-lg-3">
      <div ng-repeat="file in files track by $index">
        <a ui-sref="file({name: file.name})">{{file.name}}</a>
      </div>
    </div>
    <div class="col-sm-9 col-md-9 col-xl-9 col-lg-9">
      <ui-view></ui-view>
    </div>
  </div>
</body>

</html>

Answer 1

每次点击链接时，都会创建新的编辑器，这是一项费用操作。

The best approach is to create one editor and load the content on every click.

所以我删除了ui-router链接（ui-sref）和相关控制器

<script>
 var app = angular.module('flapperNews', ['ui', 'ui.router']);

  app.controller('MainCtrl', ['$scope', '$state', function ($scope, $state) {
   $scope.files = [
    { name: "index.html", body: "<html><body>index.html</body></html>" },
    { name: "index.js", body: "the body of index.js" },
    { name: "test.html", body: "the body of test.html" }];

   $scope.editorOptionsHTML = { mode: 'text/html', lineNumbers: true, matchBrackets: true };


  // for every click event it will load the content
   $scope.go=function(file){
     $scope.file=file;
   }
  }]);

和身体

<body ng-controller="MainCtrl">
  <div class="row">
    <div class="col-sm-3 col-md-3 col-xl-3 col-lg-3">
      <div ng-repeat="file in files track by $index">
        <a ng-click="go(file)">{{file.name}}</a>
      </div>
    </div>
    <div class="col-sm-9 col-md-9 col-xl-9 col-lg-9">
      <textarea ui-codemirror="editorOptionsHTML" ng-model="file.body"></textarea>
    </div>
  </div>
</body>

示例：JSBin

Answer 2

您可以通过将hide类添加到textarea来避免轻弹，如下面的代码（jsbin）

template: '<textarea class="hide" ui-codemirror="editorOptionsHTML" ng-model="file.body"></textarea>',

从textarea轻弹到ui-codemirror框架

2 个答案: