Following the advise of this answer, I've been trying to render a controller and template manually, but I can't get it to work when the template contains an ng-switch directive. Any ideas?
Here's the fiddle: http://jsfiddle.net/kynZm/
It looks like the ng-switch directive was being compiled before my link function had a chance to run and was linking to the $rootScope. Moving the $compile call to the compile phase of the directive seemed to do the trick.
http://jsfiddle.net/z8uXg/
Related
I have an accordion with overridden template like that:
<uib-accordion-group template-url="/somefolder/accordion-group.html">
but I really want to use a scope variable for that, e.g. something like this:
<uib-accordion-group template-url="{{::urls.templateUrls.customAccordion}}">
but that does not seem to work.
Is there a way to use angular expression in template-url or it's not supported?
The code to read the template-url attribute is in the templateUrl function of the directive as shown here The template-url attribute is being evaluated before the $compile phase so the interpolation you are trying to use has not occurred yet. While the template-url evaluation could be moved to the linking phase, then the $compile phase would have to be run again against the new template and that wouldn't be a very efficient approach
I'm trying to dynamically load a directive.. something like this:
<div class="{{directive-name}}></div>
or
<!-- directive: {{directive-name}} -->
This doesn't work, because I guess the {{directive-name}} is replaced after angular have checked for the directive.
How can I make this work?
Many thanks in advance
Have a look at $compile function. With that you can actually manually bootstrap a function. With your approach it's already too late.
See this plnkr
https://plnkr.co/edit/theggRtJlbFj1H4zVUKU?p=preview
using the $compile service, I need to have dirC nested inside dirB.
The output should be
DirB
DirC
I thought this was bug since dirC directive and controller was never fired, so the Angular group said to use transclusion.
Ok, so I use transclusion and dirC and dirB is never added to the DOM.
What am I missing?
The directive C is included inside the directive B. But the only visible text in both templates is inside the div which has the directive ng-transclude. So the textual content is replaced by the transcluded HTML: the directive C in the case if <dir-b>, and nothing in the case of <dir-c>.
Here's your example with fixed templates to show you that it works fine: https://plnkr.co/edit/FRtMA3h0Caredc4staW8?p=preview
Like ng-view, ng-transclude is a placeholder which means: replace the content of this element by the one inside the body of the directive.
I'm reading the directives section of the developers guide on angularjs.org to refresh my knowledge and gain some insights and I was trying to run one of the examples but the directive ng-hide is not working on a custom directive.
Here the jsfiddle: http://jsfiddle.net/D3Nsk/:
<my-dialog ng-hide="dialogIsHidden" on-close="hideDialog()">
Does Not Work Here!!!
</my-dialog>
<div ng-hide="dialogIsHidden">
It works Here.
</div>
Any idea on why this is happening?
Solution
Seems that the variable dialogIsHidden on the tag already make a reference
to a scope variable inside the directive and not to the variable in the controller; given
that the directive has it's own insolated scope, to make this work it's necesary to pass
by reference the variable dialogIsHidden of the controller to the directive.
Here the jsfiddle:
http://jsfiddle.net/h7xvA/
changes at:
<my-dialog
ng-hide="dialogIsHidden"
on-close="hideDialog()" dialog-is-hidden='dialogIsHidden'>
and:
scope: {
'close': '&onClose',
'dialogIsHidden': '='
},
You're creating an isolated scope inside your directive when asigning an object to scope. This is why $scope.dialogIsHidden is not passed through to the directive and thus the element is not being hided.
Kain's suggested adjustment for the fiddle with using $parent illustrates this.
your can change the
<my-dialog ng-hide="dialogIsHidden" on-close="hideDialog()">
to
<my-dialog ng-hide="$parent.dialogIsHidden" on-close="hideDialog()">
I've a two directives with transcluding html which calls isolated scope.
This Plnkr works fine while templates are inline, but if I change template to templateURL, it stops work.
Are there any issues with compiling?
Loading the template use URL, Angularjs creates an additional transcluded scope I guess.
Try to use $$prevSibling.$$prevSibling to access the functions.
Btw, it is really hacky to use $$prevSibling.
<div authorization>Sign in</div>
<div registration>Registration</div>