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

Question

我创建了一个示例Meteor应用程序 ，该应用程序与AngularJS集成并通过UI.Ace Angular指令嵌入Ace编辑器 。 但是，尽管显示了编辑器，但它不接受输入。 在Chromium / Chrome中，只有在我打开或关闭Developer Tools之后，编辑器才会做出反应并响应输入（编辑器必须对浏览器状态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>

CoffeeScript

咖啡

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() 。