angularjs - How come Ace editor won't work correctly in my Meteor/Angular application? -


i've created example meteor application integrates angularjs , embeds ace editor via ui.ace angular directive. however, although editor shows up, doesn't accept input. in chromium/chrome it's after open or close developer tools editor reacts , becomes responsive input (the editor must react change in browser's state afaict).

basically, how fix app ace component works , accepts input? full source code app available @ github.

code

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 excellent <a href="http://meteor.com/">meteor</a> framework ,             <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

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

problem editor isn't resized properly. try updating ace version or calling editor.resize() after ui ready.


Comments

Popular posts from this blog

How to remove text and logo OR add Overflow on Android ActionBar using AppCompat on API 8? -

html - How to style widget with post count different than without post count -

url rewriting - How to redirect a http POST with urlrewritefilter -