In my AngularJS project, I've implemented a directive within a module named ThreeViewer that displays WebGL scenes based on the specified source file. The code snippet below outlines the basic functionality:
angular.module('ThreeViewer', [])
.directive('three', ['$http', function ($http) {
return {
link: function (scope, element, attr) {
scope.renderer = new SceneRenderer(element[0])
$http.get(attr.src)
.success(function (json) {
var loader = new THREE.ObjectLoader()
var scene = loader.parse(json)
this.scene = scene
this.renderer.setScene(scene)
}.bind(scope))
},
restrict: 'AC',
scope: {
src: '='
}
}
}])
The current functionality successfully loads the scene, saves it to the scope, and passes it to the renderer. Now, I'm looking to incorporate user interaction, such as object rotation, by creating a controller. However, I'm unsure how to approach this while maintaining Angular's principle of separation of concerns. How can the controller work independently of the directive and vice versa, without direct dependencies on one another? Should the controller avoid directly modifying the scope.scene object? If so, how can this be achieved?
One potential solution could be to have the controller perform generic actions like rotation without specific knowledge of the object, and then find a way for the directive to interpret and apply these actions. Alternatively, is it acceptable for the controller to directly edit scope.scene? If so, how can this communication be established?