为什么 Ace 编辑器无法在我的 Meteor/Angular 应用程序中正常工作？

Question

我创建了一个example Meteor application，它与AngularJS 集成，并通过UI.Ace Angular 指令嵌入了Ace editor。然而，虽然编辑器出现了，但它不接受输入。在 Chromium/Chrome 中，只有在我打开或关闭开发者工具之后，编辑器才会做出反应并对输入做出响应（编辑器必须对浏览器状态 AFAICT 的某些变化做出反应）。

基本上，我如何修复我的应用程序以使 Ace 组件工作并接受输入？我的应用程序的完整源代码可在 github 获得。

代码

HTML

angular.html

<div class="content pure-g-r" data-ng-controller="MeteorCtrl">
    <header>
        <nav id="menu" class="pure-menu pure-menu-open pure-menu-fixed pure-menu-horizontal">
            <div class="pure-u-1-5">
                <div class="pure-menu-heading">Meteor-Ace</div>
            </div>

            <ul class="pure-u-4-5">
                <li data-ng-repeat="menuItem in menuItems">
                    <a href="{{menuItem.address}}">{{menuItem.name}}</a>
                </li>
            </ul>
        </nav>
    </header>

    <article id="content">
        <div class="content-ribbon">
                <div data-ng-view></div>
        </div>
        <footer class="pure-u-1">
            Made with the excellent <a href="http://meteor.com/">Meteor</a> framework and
            <a href="http://meteor.com/">AngularJS</a>. © 2013 Arve Knudsen
        </footer>
    </article>
</div>

partials/home.html

<div class="pure-u-1-5">
    <div id="sidebar">Sidebar Content</div>
</div>

<div class="pure-u-4-5">
    <div id="editor-container">
        <h1><a href="http://ace.c9.io/">Ace</a> Editor Demo</h1>

        <div data-ui-ace></div>
    </div>
</div>

咖啡脚本

app.coffee

require(["angular", "underscore"], (angular, _) ->
  homeUrl = "/"

  app = angular.module('meteorapp', ['meteor', 'ui.ace'],
    ['$routeProvider', '$locationProvider', ($routeProvider, $locationProvider) ->
      $routeProvider.when(homeUrl, templateUrl: 'partials/home.html', controller: "MeteorCtrl")
      $routeProvider.otherwise(redirectTo: homeUrl)
      $locationProvider.html5Mode(true)
    ])

  class MenuItem
    constructor: (@name, @address) ->
      @isSelected = false

  app.controller("MeteorCtrl", ["$scope", ($scope) ->
    $scope.menuItems = [
      new MenuItem("Home", homeUrl),
    ]
  ])

  app.controller("HomeCtrl", ["$scope", ($scope) ->
    markSelected($scope, homeUrl)
  ])

  markSelected = ($scope, url) ->
    _($scope.menuItems).each((item) =>
      item.isSelected = item.address == url
    )
)

Answer 1

问题是编辑器没有正确调整大小。 在ui准备好后尝试更新ace版本或调用editor.resize()。