Hi everyone! I'm trying to get grasp od angular lately. It is awesome but I run into some trouble from time to time :).
I'll start with a link to fiddle: http://jsfiddle.net/2r71xsgm/4/ Best way to learn is to write code. So I figured out that I will create a directive(s) that will help me place and size divs using absolute positioning. Standard thing: relative positioned parent and absolute positioned children. But I wanted to do it angular way so the dimensions and placement of the div will be stored in a model (POJO): { width: 2, height: 20, top: 10, left: 40, units: { width: { unit: 'em', unit2px: 14 } } }; Additional feature will be different units usage (not only pixels). Pixels will be the default ones though. However all the calculations will be done in pixels (mouse events return values in pixels). For the purpose of this question you can completely ignore units (it is not yet ready or used). So there is an object containing width, height, left and top all in pixels (the Model). It is created in controllers scope (hardcoded for testing). My idea was: 1. Create a directive that will place and size it (called it fmSpaceState). The placement of the element is the sole purpose of the directive. 2. Create a directive that will allow dragging that around (fmDraggable). It uses only the model to change the placement of the element. fmSpaceState should do the rest. 3. Create a directive that will allow resizing (not done yet, but will work on same pronciples as fmDraggable). Problems: - different units I solved this by adding a service (fmModelSpaceStateMap) that takes the model and checks if units element is present. It has methods to operate on the model (getters and setters, each of them takes the model as first param - this service is stateless). - isolated scope problem I need it to be in isolated scope but only one directive can request that on element. Moreover the isolated scope has to be shared by all the directives. I decided to * use isolated scope on fmSpaceState as the main directive and bind the model from parent controller * use controller and bind the scope to it in each of the directives * require fmSpaceState in fmDraggable (sharing the controller) This should give me shared isolated scope, however weird that sounds. Actually the controller is shared, but it is bound with the scope - so eventually the model from isolated scope is available in both directives through controller. He're is a (kind of) diagram of how I think it looks like :) In the end there should be only one instance of the model available for both directives. All seems to work fine, but the watchers set on scope in fmSpaceState detect model change only once: on startup. Then the changes are not applied. The model changes - I tested that with the two input fields that change when dragging the box. Try it out on fiddle by dragging the box. You'll see the model changes on drag (input fields are bound with it) but box stays put. Thanks in advance! Michał -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
