Angular 1.5 recursively nested component - javascript

I'm looking to build something like an expand collapse using Angular 1.5 Components. The idea is that you could have one or more of these in a row, or you could nest them to create a tree. So, valid html might look like:
<expand-collapse title="This is my title">
<p>This is my content</p>
</expand-collapse>
Or
<expand-collapse title="Level 1 Title">
<expand-collapse title="Level 2 Title">
<p>This is my content</p>
</expand-collapse>
</expand-collapse>
So, my question is whether or not I can do this with an Angular 1.5 Component (not Directive) in a way that the Level 2 expand-collapse could be aware of it's parent expand-collapse. Typically when you nest components like this I think you would have something like:
component('expandCollapse', {
...
require : {
parentCtrl : "^expandCollapse"
}
...
However A) nesting isn't REQUIRED in this case, and B) parentCtrl ends up being a never-ending recursive reference to the current $ctrl.
Is this something that can be done with Components? Or has it been explicitly banned for some reason?

I see only two way :
Define a directive for each level requiring the precendent level, this may lead to unnecessary code.
Search use angular functions : element.parent().controller('expand-collapse');. This approach is usually not recommended but I don't see anything simpler /cleaner than this.

Related

Angular 2 - How to insert variable in component

I would like to dynamically load a component. So I tried this approach but it didn't worked:
<page-{{current_page}}></page-{{current_page}}>
Currently I'm using this approach but it doesn't seems efficient:
<div *ngIf="current_page==1">
<page-1></page-1>
</div>
<div *ngIf="current_page==2">
<page-2></page-2>
</div>
...
This is not supported. String interpolation {{}} can only be used for property-values and element-content, but not for element-names or attribute-names.
Perhaps ViewContainerRef.createComponent() can do what you need.
For an example see Angular 2 dynamic tabs with user-click chosen components
If you have a limited set of components you want to display, *ngIf or ngSwitchCase is the way to go.

Angularjs aliasing scopes

I'm stil learning Angular so forgive me if the question is nonsense
I have an object with this hierarchy:
{
a : [...],
b : [{
a: [...]
}, {
...
}]
}
That is I have the same object model for direct children and indirect children of the main object. That is, the two properties named "a" have the same fields
I built a view that is managed with ng-view, and thought that could be called in the main controller and in the ng-repeat that iterates through b elements. However, I don't know how to change the scope that is passed to the view managing "a":
The main view is made in this way:
<div ng-controller="MainController as ctrl">
<div ng-include="'subView'"/>
<div ng-repeat="bElement in ctrl.b">
<div ng-include="'subView'"/>
</div>
</div>
In subView, i can access element like bElement.a because I get the same scope as the outer controller. But how to access property a of the root element?
What I would need, is to have something like ng-repeat that permits to create an alias to a property so that it can be overridden, but without the "repeat".
I tried also using ng-init in this way:
<div ng-controller="MainController as ctrl">
<div ng-include="'subView'" ng-init="list = ctrl.a"/>
<div ng-repeat="bElement in ctrl.b">
<div ng-include="'subView'" ng-init="list = bElement.a"/>
</div>
</div>
but only the second invocation works
Above code should work, but the only thing which I can see here missing is, you haven't closed below ng-include div correctly. So it stops browser will not consider the exact next div & the innner ng-repeat div will not get render.
<div ng-include="'subView'" ng-init="list = ctrl.a"/>
So it should be closed the div correctly, so that the next element on same will taken by browser.
<div ng-include="'subView'" ng-init="list = ctrl.a"></div>
Sample Plunkr of above issue.
Solved working Plunkr list variable updated in child.
Though it will work, I'm seeing some architectural threat in current implementation, because current implementation looks very tightly coupled. Any small change in requirement could lead to re-work on it. As ng-init may harm you in future. If suppose your collection is going to update in specified time of interval(at that ng-init expression will not evaluated on second time rendering of template)

Writing a directive to encapsulate multiple directives Angular

I'm using Angular 1.x and I have a section of code that I'm looking to repeat quite a bit, so I wanna throw it in a directive. The trouble is, it's somewhat complicated and I'm not sure how to begin writing it.
Essentially, it's a section of the page that displays various card directive and with infinite scrolling and perfect scrollbar.
<perfect-scrollbar refresh-on-change="myScope.data">
<div class="limit-columns">
<masonry masonry-options="{gutter: 30, isFitWidth: true}">
<user-card class="masonry-brick" ng-repeat="item in myScope.data"></user-card>
</masonry>
<div class="infinite-scroller" infinite-scroll="myScope.showMore()" infinite-scroll-tolerance="5"></div>
</div>
</perfect-scrollbar>
Perfect-scrollbar and masonry are both angular libraries on GitHub. Infinite-scroller is one I wrote myself, but works as you'd expect.
myScope contains a data attribute that is a list of objects containing a card's data. myScope.showMore is a function that adds items to that myScope.data list. Perfect-scrollbar also takes the refresh-on-change attribute which watches for changes on a particular object, in this case the list.
Ideally my directive would look something like this:
<card-scroller gutter="30" tolerance="5">
<some-card ng-repeat="achievements.data"></some-card>
</card-scroller>
But I'm not sure how feasible this is. Thanks!

Using the same directive in a directive [angularjs]

I have a need to use the same directive within a directive, depending on a conditional param. However, when ever i try to do it, it seems to go to an endless loop. As i understand, it tries to pre-load the templates and that causes an endless recursion and at the end, it just throws me the following error:"RangeError: Maximum call stack size exceeded".
I have created an example in fiddle.. as you can see in the example, when the param's value is "1", it creates the error (even when the second level param is valued as "2" so it shouldn't have real recursion issues in the controller/app).
https://jsfiddle.net/qh9nh1gx/
"custom-directive"'s template:
<div>
<div ng-if='info==1'><div custom-directive info='2'></div></div>
<div ng-if='info==2'>DONE,single.</div>
</div>
Thanks
I have found 2 options to deal with the issue, the first one, is exactly what Jju described - creating a new "compiler" method (it can be grabbed from the url he sent).
The second option - always using an additional template for the "recursive" parts of the directive. For example, in my directive, i had a "ng-repeat" part that depending on the items value, it could request to display the directive again. while i used "ng-include" to have the other directive, it worked.
<div ng-repeat="item in items" ng-include="'inline-possibly-recursive-template"'></div>
in that template, you can call the directive again without any issues..
I hope that it will anyone else that will stumble into that issue.
You can look into https://stackoverflow.com/a/19065910/1680674 that describe a common approach to create directive that use himself inside

Toggling between templates displayed by an angular directive

I have an angular app that shows a list of things
<div ng-repeat="thing in things" regular-thing>
implemented with an ng-repeat that shows a regularThing directive for each thing in my list.
It's actually a little bit trickier than that though:
<div ng-repeat-start="thing in things">
<div ng-if="$first || thing.isSpecial" special-thing></div>
<div ng-if="!$first && !thing.isSpecial" regular-thing></div>
</div>
<div ng-repeat-end></div>
I use a different directive for the first thing in my list, and also for any "special" things. For our purposes, a thing becomes "special" when the user clicks on it - so, as they're scrolling through the list, they can click on a thing to have it displayed in a different (more extensive) template.
The way I have it now feels wrong to me. For one thing, I really don't need to have two different directives - just different templates. The logic is identical, specialThing just has a bit more of it. For another thing, I'm toggling a property on the data (namely thing.isSpecial) for purely view-related reasons, which makes me die a little bit inside.
So my question: Don't I deserve to die a little bit inside for this? Isn't there a cleaner, more "angular" way to handle this (i.e. to toggle between the directive templates)?
First, no one deserves do die. So the answer to your question is "no".
But you do raise some interesting points.
First, it's ok to have "view model" information in your scope (or controller, depending on if you are using the ControllerAs syntax or not). However, you definitely don't want to add view model information to your data models. Here's how I might do it (using your click-toggles-something-special example).
<div ng-repeat-start="thing in things">
<div ng-if="$first || isSpecial" ng-include="/specialtemplate.html" ng-click="isSpecial = !isSpecial"></div>
<div ng-if="!$first && !isSpecial" ng-include="/regulartemplate.html" ng-click="isSpecial = !isSpecial"></div>
</div>
<div ng-repeat-end></div>
The key difference is I'm adding the isSpecial property to the scope, not to thing, and isSpecial will be specific to that particular ng-repeat item's scope.
Also, unless you're planning on doing DOM manipulation, you can replace them with ng-include + ng-controller in the template html.
Some people prefer that pattern (include + controller) instead of directives, and other prefer to go ahead and others prefer to go ahead and write directives because it's more "componenty" (I made that word up). I think either is a valid way to go.

Categories

Resources