Ace-editor 在其他页面上不起作用 - AngularJS App答案

【问题标题】：Ace-editor not working on other pages - AngularJS AppAce-editor 在其他页面上不起作用 - AngularJS App
【发布时间】：2014-01-16 11:41:02
【问题描述】：

我正在尝试使用 ACE 编辑器在页面上显示代码（JSON 响应）。当我尝试登录页面上的 ace 示例index.html 时，它可以工作。但是当我在page2.html 上使用相同的代码时，它就不起作用了。

HTML

<div id="editor">
  function foo(items) {
   var i;
   for (i = 0; i &lt; items.length; i++) {
     alert("Ace Rocks " + items[i]);
   };
</div>

SCRIPT：相同的代码在 index.html 上有效，但在其他页面上无效。

var editor = ace.edit("editor");
editor.setTheme("ace/theme/twilight");
editor.getSession().setMode("ace/mode/javascript");

我什至尝试将上述 js 代码放在外部文件 <script src-"js/script,js"></script> 上，希望它可以在任何页面上使用。

由于它是一个 AngularJS 应用程序，page2.html 和其他页面通过 ngView 加载

【问题讨论】：

我猜你的 var editor = ace.edit("editor");在加载内容 og page2.html 之前进行评估...
啊是的，把它放在page2.html 的 Ctrl 上而不是 html 上。谢谢

标签： javascript html angularjs ace-editor

【解决方案1】：

正如@Michael 建议的那样，Ace 在加载页面内容之前评估var editor = ace.edit("editor")。我不得不将脚本代码放在 page2.html 控制器中，而不是在 html 或外部脚本中使用脚本......

function page2Ctrl ($scope, $http) {
 var editor = ace.edit("editor");
 editor.setTheme("ace/theme/twilight");
 editor.getSession().setMode("ace/mode/javascript");
}

当应用程序继续 page2.html 时，页面的 ctrl 被启动。

【讨论】：

【解决方案2】：

如果你在脚本中有一个函数，那么把 var editor = ace.edit("editor");

editor.setTheme("ace/theme/twilight");
editor.getSession().setMode("ace/mode/javascript");

在同一个函数中。
你也可以这样做：

   function doOnLoad()
    {
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/twilight");
        editor.getSession().setMode("ace/mode/javascript");
    }

【讨论】：