2

I know this seems like a dumb question but I got a scenario here.

I have a javascript file using three.js to render some models. This file requires a backend library but my WebGL rendering is in front end so I used Browsefiy to combine my own codes and the backend library to a single js file named script.js.

I want to trigger the init function in script.js file in my controller defined in controllers.js (the rendering only happens after the user clicks on some button). I understand that the controller of angularJs seems isolated with outside code but I couldn't find a good solution of my problem.

Since once I browsefied my code to include the backend library, it turns my 400 lines of rendering code into 2500+ lines of code and makes it impossible to write in a single controller.

Is there any good way to work around this? I will greatly appreciate any suggestion or ideas! Thanks!

<head>
<---This are the angular files I need->
<script src="./lib/angular/angular.min.js"></script>
<script src="./lib/angular-route/angular-route.min.js"></script>
<script src="./js/app.js"></script>    
<script src="./js/controllers.js"></script>
<script src="./js/services.js"></script>

<--the followings are the rendering files I need--> 
<script src="lib/third-party/threejs/three.min.js"></script>
<script src="lib/third-party/threejs/StereoEffect.js"></script>
<script src="lib/third-party/threejs/DeviceOrientationControls.js"></script>
<script src="lib/third-party/threejs/OrbitControls.js"></script>
<script src="./js/script.js"></script>
</head>

Update I posted my script.js. It is pretty long so that I hope I can work around by figuring out how to access the init function inside in a simple way. Thanks!

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

Randolph Zeng
  • 75
  • 7
  • Tried moving the 3rd party files **above** your files? – Phil Aug 01 '16 at 23:13
  • If the third party stuff isn't being injected through Angular then you might be able to access it through the global scope. `window.threejs()` or whatever they expose. – Stephen Gilboy Aug 01 '16 at 23:26
  • @Phil Hi, sorry I am not sure what you are referring to. the last file script.js is the file that I get after Browserify. All the 3rd party code are already above it. – Randolph Zeng Aug 02 '16 at 00:25
  • Hi @Stephen, Thanks for your reply. Three.js seems to be registered under the window. It use module.exports = THREE and in my script.js file I can access it with syntax like renderer = new THREE.WebGLRenderer(); But the problem is my init function is not registered under the window object. It can not be accessed in the controller.js file. I tried module.exports but since script.js includes a backend library it also have several lines with module.exports – Randolph Zeng Aug 02 '16 at 00:30
  • 1
    Look into directives wrapping the library if it does DOM manipulation or modifies the view then the work should be done in a directive. The controller would simply bind any data onto the scope so it can be passed into the directive that ultimately uses the third party library for manipulating the DOM. This will make sure the controller and any providers in angular can be tested without the DOM and the directives can be tested for how they create/manipulate DOM objects. http://twofuckingdevelopers.com/2014/02/mixing-angularjs-threejs/ – shaunhusain Aug 02 '16 at 00:53

1 Answers1

1

If there's parent child relationship in controller, you can use 

$scope.$parent.<anything>

If not, then add it to $rootScope

You can also use $boardcast and $emit method to pass data and listen it to call a function (listener).

You can also create services which will hold the function and will be shared between multiple controllers.

Finally, see this link to get elaborated details https://stackoverflow.com/a/20181543/1702612

EDIT:

As the function is generic, you can try these solutions-

Create IIFE -

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

of if you're using ES6 -

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

You can also make the functions global using window.<function> but this will pollute the global scope and is not recommended.

Community
  • 1
  • 1
Bikas
  • 2,709
  • 14
  • 32
  • I am sorry but it seems like you misunderstood my question. The functions in my script.js files has nothing to do with controllers. – Randolph Zeng Aug 02 '16 at 00:43
  • In that case you can export functions in module as IIFE, or make it global (please don't). You can now access it easily – Bikas Aug 02 '16 at 00:45