Question

我知道这似乎是一个愚蠢的问题，但我在这里有一个场景。

我有一个使用three.js的javascript文件来渲染一些模型。这个文件需要一个后端库，但我的WebGL渲染在前端，所以我使用 Browsefiy 将我自己的代码和后端库合并到一个名为 script.js 的单个js文件中

我想在 controllers.js 中定义的控制器中的script.js文件中触发init函数（渲染仅在用户点击某个按钮后发生）。我知道angularJs的控制器似乎与外部代码隔离，但我无法找到解决问题的好方法。

由于我曾经浏览过我的代码以包含后端库，它将我的400行渲染代码转换为2500多行代码，因此无法在单个控制器中编写代码。

有什么好方法可以解决这个问题吗？我将非常感谢任何建议或想法！谢谢！

[info] Sent 200 in 200ms
iex[debug] Live reload: web/resolver/reviewer.ex
[debug] Live reload: web/resolver/reviewer.ex
Compiling 20 files (.ex)

== Compilation error on file web/resolver/reviewer.ex ==
** (Ecto.Query.CompileError) unbound variable `f` in query
    (ecto) expanding macro: Ecto.Query.preload/3
    (app) web/resolver/reviewer.ex:519: App.Resolver.Reviewer.sc_data/1
    (elixir) expanding macro: Kernel.|>/2
    (app) web/resolver/reviewer.ex:520: App.Resolver.Reviewer.sc_data/1
    (elixir) lib/kernel/parallel_compiler.ex:116: anonymous fn/4 in Kernel.ParallelCompiler.spawn_compilers/1

[error] #PID<0.2279.0> running App.Endpoint terminated
Server: localhost:4000 (http)
Request: GET /reviewers/2016/1234
** (exit) an exception was raised:
    ** (UndefinedFunctionError) function App.Endpoint.path/1 is undefined (module App.Endpoint is not available)
        (app) App.Endpoint.path("/phoenix/live_reload/frame")
        (phoenix_live_reload) lib/phoenix_live_reload/live_reloader.ex:115: Phoenix.LiveReloader.reload_assets_tag/1
        (phoenix_live_reload) lib/phoenix_live_reload/live_reloader.ex:97: anonymous fn/1 in Phoenix.LiveReloader.before_send_inject_reloader/1
        (elixir) lib/enum.ex:1623: Enum."-reduce/3-lists^foldl/2-0-"/3
        (plug) lib/plug/conn.ex:909: Plug.Conn.run_before_send/2
        (plug) lib/plug/conn.ex:355: Plug.Conn.send_resp/1
        (phoenix) lib/phoenix/code_reloader.ex:50: Phoenix.CodeReloader.call/2
        (app) lib/app/endpoint.ex:1: App.Endpoint.phoenix_pipeline/1
        (app) lib/plug/debugger.ex:93: App.Endpoint."call (overridable 3)"/2
        (app) lib/app/endpoint.ex:1: App.Endpoint.call/2
        (plug) lib/plug/adapters/cowboy/handler.ex:15: Plug.Adapters.Cowboy.Handler.upgrade/4
        (cowboy) src/cowboy_protocol.erl:442: :cowboy_protocol.execute/4
[error] Ranch protocol #PID<0.2281.0> (:cowboy_protocol) of listener App.Endpoint.HTTP terminated
** (exit) killed
Compiling 20 files (.ex)

== Compilation error on file web/resolver/reviewer.ex ==
** (Ecto.Query.CompileError) unbound variable `f` in query
    (ecto) expanding macro: Ecto.Query.preload/3
    (app) web/resolver/reviewer.ex:519: App.Resolver.Reviewer.sc_data/1
    (elixir) expanding macro: Kernel.|>/2
    (app) web/resolver/reviewer.ex:520: App.Resolver.Reviewer.sc_data/1
    (elixir) lib/kernel/parallel_compiler.ex:116: anonymous fn/4 in Kernel.ParallelCompiler.spawn_compilers/1

^C
BREAK: (a)bort (c)ontinue (p)roc info (i)nfo (l)oaded
       (v)ersion (k)ill (D)b-tables (d)istribution

更新我发布了我的script.js。这很长，所以我希望我可以通过弄清楚如何以一种简单的方式访问内部的init函数来解决这个问题。谢谢！

https://jsfiddle.net/ruiss/qr616n4q/

Answer 1

如果控制器中存在父子关系，则可以使用

$scope.$parent.<anything>

如果没有，请将其添加到$rootScope

您还可以使用$boardcast和$emit方法传递数据并监听它以调用函数（侦听器）。

您还可以创建将保留该功能的services，并在多个控制器之间共享。

最后，请参阅此链接以获取详细说明 https://stackoverflow.com/a/20181543/1702612

修改

由于该功能是通用的，您可以尝试这些解决方案 -

创建IIFE -

var coreFunctions = (function() { return <Object_of_functions>; } ());

如果您正在使用ES6 -

module.exports = { <function_to_export_1>, <function_to_export_2>, .... };

您也可以使用window.<function>使函数全局化，但这会污染全局范围，不建议这样做。

如何访问Angularjs控制器中其他文件（而不是控制器）中定义的函数？

1 个答案: