How to create reusable custom directives in angular JS

Question

How can one create a reusable model window in AngularJS?

I'd like it to be reusable in the sense that we trigger the modal window with a hyperlink and set the popup content based on the parameter passed. For example:

<div ng-controller="SampleCtrl">
    <a ng-click="toggleModal('FirstParam')">first</a>
    <a ng-click="toggleModal('SecondParam')">second</a>
    <a ng-click="toggleModal('ThirdParam')">Third</a>
</div>

When the first link is clicked it would display a modal containing content related to "FirstParam", etc.

I've tried custom directives and using $parent but I don't know how to pass the parameter from the toggleModal function call into the custom directive.

How can I achieve a re-usable modal window that is similar to this example?

In particular, I would like to know:

How can I pass variables from a controller function into a custom directive?
Are there any good tutorials on reusable custom directives and scopes?
Are there any other design patterns for reusable custom directives?

shaunhusain · Accepted Answer · 2014-09-15 10:38:07Z

1

Checkout http://egghead.io for some basics on writing custom directives, also the angular docs on directive and compile have all the details https://docs.angularjs.org/guide/directive https://docs.angularjs.org/api/ng/service/$compile

Here's a plnkr I posted with an overridden template for the popover from ui-bootstrap. Depending on your exact use case you may be able to get away with just overriding a template or else making a directive that makes use of $modal or some other modal UI control http://plnkr.co/edit/eeiJ5re7mNdhHNDEeCQO?p=preview

// Code goes here

angular.module("myApp", ["ui.bootstrap", "ngSanitize"]).controller("TestCtrl", function($scope){


})

angular.module("template/popover/popover.html", []).run(["$templateCache", function ($templateCache) {
        $templateCache.put("template/popover/popover.html",
            "<div class='popover {{placement}}' ng-class='{ in: isOpen(), fade: animation() }'>" + 
            "<div class='arrow'></div><div class='popover-inner'>" + 
            "<h3 class='popover-title' ng-bind='title' ng-show='title'></h3>" + 
            "<div class='popover-content' ng-bind-html='content'></div>" +
            "<button class='btn btn-cancel' ng-click='manualHide()'>Cancel</button>" +
            "<button class='btn btn-apply' ng-click='manualHide()'>Apply</button></div></div>");
    }]);

answered Sep 15, 2014 at 10:38

shaunhusain

19.7k4 gold badges41 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gangadhar Jannu Over a year ago

Thanks for answering. I've gone through angularjs.org and custom directives however I was struck at "How to pass parameter from controller to directive 'link' function" If I know this I would dynamically load templates based on the hyperlink.

shaunhusain Over a year ago

Basically you just need to read the details in the compile documentation about scope definition details

Collectives™ on Stack Overflow

How to create reusable custom directives in angular JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related