I have a directive w/ a template that will work in 90% of scenarios. However there are some scenarios where I'll need additional fields be added to the template. Is there a way to extend or modify an existing html template so that adding additional fields is a possibility without rebuilding 90% of an existing template
Put an ng-content in your template
The content you place inside the components tag will appear where you have the ng-content
<your-component>
This content will appear where the ng-content tag is in your component's template
</your-component>
or you can pass in a template
In your component you can have an input that takes a template
#Input()
myTemplate: TemplateRef<any>;
and in the template
<ng-container *ngTemplateOutlet="myTemplate" *ngIf="myTemplate"></ng-container>
and you can pass it in with
<your-component [myTemplate]="someCOntentTemplate"></your-component>
<ng-template #someCOntentTemplate>
This content will be passed to the component
</ng-template>
Related
When i want to make something start as hidden with ng-show you can just add class="ng-hide" so the css will hide the element beforehand. This way an element won't be shown when the page is still loading
I want to do the same thing using ng-if but i don't know how to do it
As Michiel suggested, using the ngCloak directive is the solution.
Just add ng-cloak to the class attribute of the tag you want to keep hidden while your application is loading.
<div class="ng-cloak">test</div>
For more details: https://docs.angularjs.org/api/ng/directive/ngCloak
I'm trying a pretty unusual approach of rendering a UI Bootstrap tab via AngularJS.
What I'm trying to do is:
Custom directive -- (That creates a) --> UI Bootstrap Markup -- (That renders) --> A Tab
I know that two directive shouldn't edit the same DOM node, so I used
- Priority attribute
- Terminal attribute
To allow my directive to be the first ones that are compiled and only then the Bootstrap directive should work on the DOM node.
My initial markup is something like:
<mytabcontainer>
<mytab title="Tab">Content</mytab>
<mytabcontainer>
That will convert to this Bootstrap markup
<tabset>
<tab heading="Tab">Content</tab>
</tabset>
I correctly transform the custom markup to the Bootstrap one, but it doesn't get correctly displayed.
Here is a Fiddle that shows my current progress: Fiddle
Unfortunately this is the only approach I can use because of previous decisions so please don't just tell me to directly use Bootstrap markup
The situation is I have an HTML structure somewhat similar to this:
<div class="dynamicDirectiveGoesHere">
<p>{{SomeExpressionThatDiffers}}</p>
</div>
I need to display a bootstrap http://angular-ui.github.io/bootstrap/ popover when the text within p has an ellipsis. That's why I'm adding the popover attribute dynamically. I can get the popover to display using $compile, but the problem is the text within {{ }} goes away. I can't use the template trick since I don't really know what the template will be since the popover will happen on several different child tags that have different templates. So that's why there is the need to only $compile what's in div, and not in the child element (p tag). Is this possible with angular?
You can add the property terminal to your directive and adjust the priority to fit your needs.
terminal: true prevents other directives from getting instantiated and is used by for example the ng-repeat and ng-if directive.
You can read more here https://docs.angularjs.org/api/ng/service/$compile (scroll down to terminal).
I have a binding problem when I use ng-directive.
I read some other post but I don't succedd bind variable in my ng-include.
<ng-include src="'template.html'"
ng-repeat="item in bloc.items"
onload="data=item; highlight=forceHighlight;"></ng-include>
forceHighlight is a scope variable who are well initialized but when the variable change in the controller, change are not passed into the template.
Here a fiddle to demonstrate my problem: http://jsfiddle.net/h24gtw51/2/
The goal is to have a template who display "text" or "zone" or "image", then if i click on the checkbox highlight i want display a border on "text"
I test to add controller in the ng-include but without success.
You don't need to manually bind the variable inside the include - your parent scope is automatically binded, so you can just access it. If you change your directive to use forceHighlight (ignore the onload assignment), your example will work :)
Look at this version of your fiddle.
there is an ng-show directive in angular, but is there a ng-render directive? that adds the template of a directive to the dom only when conditions are met?
the problem with ng-show is that it only uses css to hide elements, and since I am creating an enormous list, and I am only displaying the visble elements, I dont want the content of not visible content to be partially rendered.
You can use ng-if or ng-switch. Neither include content unless your conditions are met.