I am facing a situation where I need a modal to only appear when specific conditions defined in my controller are met, rather than every time a button is clicked.
Here's the HTML CODE:
<button class="btn btn-primary-outline" type="button" data-uk-modal="{target:'#previewModal'
}" ng-click="previewOfferBefore()">Preview</button>
The above code successfully displays the modal with the id 'previewModal' when clicked. My plan is to incorporate the conditional logic within the controller and use Angular data binding to dynamically set the value of "target".
For example:
<button class="btn btn-primary-outline" type="button" data-uk-modal="{target: {{ previewLink
}}}" ng-click="previewOfferBefore()">Preview </button>
In the controller, I would have:
$scope.previewOfferBefore = function() {
if (/*some conditions here*/) {
$scope.previewLink = '#'; /*prevent the modal from popping up */
}
else {
$scope.previewLink = '#previewModal' /*allow the modal to pop up */
}
}
I also experimented with using ng-href instead of Bootstrap's data-uk-modal, but that did not yield the desired outcome. I am confident in the functionality of my controller function because when I output {{ previewLink }} within a paragraph tag, it displays the correct id as expected. Therefore, the issue lies in how I am binding the data inside the button class.