CODEWITHSUNDEEP
angularjsangularjs-directive
rabidgremlin
rabidgremlin

Reputation: 763

Is their a better way for a controller to 'call' a directive

I have a directive that creates and manages a bootstrap modal dialog.

Currently I have the directive watch a boolean held on the controller. The controller can then set this to true to have the modal dialog display.

This seems kinda messy. Is there a better way?

The directive in action:

<modal trigger="shouldDisplayModal" title="{{modalTitle}}" 
message="{{modalMessage}}" positiveclick="okClicked()" 
negativeclick="closed()" 
positivelabel="Ok" negativelabel="Cancel"/>

The watch in the controller of the directive:

// watch the trigger value. expected to be boolean
$scope.$watch('trigger',function(newValue, oldValue){                
    if (newValue)
    {
        // enable any disabled buttons 
        modalElem.find('button').removeClass('disabled');
        // show the dialog
        modalElem.modal('show');
    }
    else
    {
        // hide the dialog
        modalElem.modal('hide');
    }
});

Here is a working example: http://jsfiddle.net/rabidgremlin/Ya96z/31/

UPDATE: Here is a fixed up example that corrects some issues with multiple directives on a page: http://jsfiddle.net/rabidgremlin/sjbCJ/1/

Upvotes: 0

Views: 345

Answers (2)

Will Vincent
Will Vincent

Reputation: 331

I blogged about working with angular and bootstrap modals just a couple weeks ago.

My solution involves a service, all of the hide/show magic for the modal is handled by bootstrap's javascript, and angular just worries about the data.

http://willvincent.com/blog/angularjs-and-twitter-bootstrap-playing-nicely

Upvotes: 0

Mark Rajcok
Mark Rajcok

Reputation: 364677

I was going to suggest using ng-show inside your directive's template (this what the dialog component on the directive page does, along with a visible attribute that is just like your trigger attribute), but then I saw that you also need to enable some buttons before modifying the visibility.

So, I think what you have is fine, and I don't see it as messy. Either your directive has to $watch for something, or you could create the dialog when an event happens -- this seems to be what the $dialog service does that @pkozlowski mentioned in the comments. The latter would not need a trigger attribute.

Upvotes: 2

Related Questions