CODEWITHSUNDEEP
angularjs
Fenda
Fenda

Reputation: 1385

Render a directive from a controller

I've built a directive <playlist> which calls my custom service to return and then display a list of videos. So far so good. However, I don't want this directive to render and call my API until the user clicks on a link elsewhere on the page.

How can I have a link outside of the directive trigger the rendering of the <playlist> item? I looked for some sort of onShow event to no avail.

Upvotes: 0

Views: 49

Answers (2)

Fenda
Fenda

Reputation: 1385

I was able to figure this out based on dnc253's feedback.

<a href="" ng-click="showPlaylist = showPlaylist ? false : true">Toggle Playlist</a>

<div ng-if="showPlaylist != undefined">
     <playlist ng-show="showPlaylist"></playlist>
</div>

On initial page load <playlist> is hidden and not rendered. Clicking the link renders <playlist>. Subsequent clicks toggle the ng-show attribute and so the scope is not reset.

Upvotes: 0

dnc253
dnc253

Reputation: 40327

You can use the ng-if directive to keep your directive out of the DOM until the link is clicked. So your HTML would looks something like this:

<div ng-if="showPlaylist">
    <playlist />
</div>

Then you would just set showPlaylist to true when you want it to show/render.

Upvotes: 2

Related Questions