I've been noodling over a similar kind of case. What I ended up deciding
was that yes, it's totally possible. You'd have to be pretty clever about
it, and you may want to use ui-router.
One could imagine a typical responsive grid layout like bootstrap3,
foundation, or neat providing the general structure of rows and columns.
Then it's just a matter of organizing the div objects in the right order
and giving them the appropriate values for their scale (width, etc). You
could then define a directive that's in charge of rendering a Thing into
the page (folder, image, video, property), especially if the rendering is
similar across the four or more cases (tab plus border plus inner content).
Each Thing directive would have a template like <div
ng-class="{{view.columnWidthClass}}">stuff</div>
Then define some kind of object on the $scope that represents the actual
structure, so you can do ng-repeats over that view model and figure out how
to deal with the view.columnWidthClass data getting into the scope as
column-3 or column-6 or whatever, depending on how wide you want the thing
to be. Define drag behaviors to change the underlying data model, and the
page will rearrange itself.
It's all definitely doable, and I don't think you'd need to use compile
functions either, just linking ones. That said, I've not actually
implemented this yet- I'm just thinking about how it could be done. At the
end of the day, Angular's a pretty rad MV* framework, you can do most
anything with it that you want, provided you're willing to dig deep into
how it works.
e
On Tue, Jul 15, 2014 at 4:46 AM, Robert Retzbach <[email protected]>
wrote:
> Hi,
>
> I would like to create an angular app in which the page layout is
> dynamically changable by the user:
> I want the user to be able to rearrange viewparts of the page as he likes.
> The app can create new viewparts on-the-fly. So there is no fixed number of
> viewparts.
>
> My current idea is to achieve that via changing of the DOM structure.
> Please take a look at the mockup below:
> <http://i.stack.imgur.com/iAZw9.png>
>
>
> How would I go about building my angular app?
> How can I have a dynamically changing DOM structure yet still use
> angular's databinding for the content of each view?
>
> If this is doable the following usecase could be realized in an ng-app:
>
> Drag a view by its handle:
> <http://i.stack.imgur.com/ffVZh.png>
>
>
> As a result the view now shares space with another view:
>
>
>
> Best regards
> Robert
>
> --
> 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.
>
--
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.
