我创建了一个示例 Meteor 应用程序,它与AngularJS集成并通过UI.Ace Angular 指令嵌入Ace 编辑器。然而,虽然编辑器出现了,但它不接受输入。在 Chromium/Chrome 中,只有在我打开或关闭开发人员工具后,编辑器才会做出反应并响应输入(编辑器必须对浏览器状态 AFAICT 的某些变化做出反应)。
基本上,如何修复我的应用程序以使 Ace 组件工作并接受输入?我的应用程序的完整源代码可在github 上找到。
代码
HTML
角.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>
部分/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>
咖啡脚本
应用程序.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
)
)