I'm trying to use UI Bootstrap's modal dialog, inside an Angular controller, rendered inside an Asp MVC View.
Somewhere within the page, I embed modal div :
<div class="modal inmodal" id="newActivityModal" tabindex="-1" role="dialog" aria-hidden="true">
which is triggered by:
<button ng-disabled="vm.activityInputText.length == 0" type="submit" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#newActivityModal">
So the structure of the page is :
<!-- ng-module="xxx" -->
...
<!-- ng-controller="zzz" -->
...
<!-- button triggering modal -->
....
<!-- modal -->
The problem however is that when the page renders, the modal window div 'jumps out' of the div where it originaly was (inside the controller) and appears at the very bottom of the page, right before the body tag.
Since inside the modal I'm using {{}} bound to controller's scope, it breaks.
Am I doint this right ?
Funny fact : if I instead put this all (the controller, button, modal window etc.) inside an <ng-view> it works fine and modal stays where it was in the DOM.
Related
I used ngMap with AngularJS to display marker and info window.
The info window is used with customized template and HTML.
However, when I used a button and click event inside the info window, it didn't work.
I tried $compile and addListener but it failed to work too.
var infoTemplate = `<button class="btn btn-success" ng-click="$ctrl.myFunction();">Add</button>`
this.markerCustomTemplate = $sce.trustAsHtml(marker.infoTemplate);
<info-window id="marker-info-custom-template">
<div ng-non-bindable="">
<span ng-bind-html="$ctrl.markerCustomTemplate"></span>
</div>
</info-window>
Sample code: https://plnkr.co/edit/mBeJb7EErrkts6Fq?preview
You should use ng-bind-compile instead of ng-bind-html.
Don't forget to include angular-bind-compile.min.js in your project.
<span ng-bind-compile="$ctrl.markerCustomTemplate"></span>
I am working on a UI task to display a popover when i click on a link. Once i click outside the popover, it will close. But while clicking on the link i am adding CSS styles to the link. When the popover is closed i want the applied css to be removed from the link. Any suggestions
code:
<div class="popover-border" uib-popover-template="'template.html'" popover-
placement="bottom" popover-trigger="'outsideClick'" popover-class="test-
popover">
Template for the popover content
<script type="text/ng-template" id="template.html">
<h1> Hello</h1>
</script>
Try changing:
popover-trigger="'outsideClick'"
to:
popover-trigger="outsideClick"
Working example is here
I am using angular 1.3 with strap modal dialog and the form inside it.
There are 2 buttons: OK and Cancel.
Cancel works as expected - it closes the modal.
But on OK the dialog is not closed; however, the form is processed as expected.
The code below shows the model and the code which instantiates the modal dialog.
I am using button type=submit on OK to process the form.
The $modal.showTemplate has 2 parameters:
1) HTML (code below)
2) callback which shall know which button was used: OK or Cancel.
For some reason, this callback is invoked only on Cancel.
I tried to fix it by using ng-click="$close(true) on OK button
instead type=submit but it does not help.
Question: how to close the modal dialog on OK?
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog ">
<div class="modal-content">
<div ng-controller="externalController">
<form
role="form"
name="detailForm"
ng-submit="submit()"
>
<div ng-controller="internalController">
... some form fields are here ...
<button class="btn" ng-click="$close(false)">
Cancel
</button>
<button class="btn" type="submit">
OK
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- invoking the modal defined above: -->
$modal.showTemplate(htmlTemplate,
function(confirm) {
console.log("callback confirm="+confirm);
if (confirm === true) {
console.log(" this point never achieved ... and modal dialog is not closed");
} else {
console.log(" this works as expected and modal dialog is closed");
}
},
);
Get rid of the submit type on your 'OK' button. Attach the ng-click directive to this same 'OK' button. On click your button will submit the form via '[externalController].submit()'. If submit() returns a promise then wait for it, otherwise then call the modal controllers 'close()';
<button class="btn" ng-click="functionThatSubmitsAndCloses()">
OK
</button>
And in your 'internal controller' you'll have that function defined on your scope
$scope.functionThatSubmitsAndCloses = function () {
[scope of externalController].submit();
$close(true); // close being defined on the instance of your modal's controller and not this internal controller.
}
Is this an older version of angular strap? I do not see showTemplate defined in their API.
I want my a modal popup before my ng-click gets executed. But only the ng-click is executing, no pop up is displaying.
<a class="btn btn-primary" data-toggle="modal" data-target="#addNewMapping" ng-click="onClickGenerate()">Generate Document</a>
addNewMapping is a div on the same view and onClickGenerate is a method on the correspnding controller.
I ended up displaying a modal popup using data-target and in the modal popup added a button to handle the ng-click event.
Mobile Angular UI Is getting popular which is nothing but bootstrap 3 and angularjs combination
I would like to create a modal dialog box on button click and close the dialog on close icon, how to do it?
Based on the docs it says
<div ui-content-for="modals">
<div class="modal" ui-if="modal1" ui-state='modal1'>
.....
</div>
</div>
But how to call this dialog, I tried this
<button ui-turn-on="modal1" class="btn btn-primary">Show Model</button>
But it is not working as expected, I am getting Warning: Attempt to set uninitialized shared state: modal1error
I think you have placed ui-content-for inside the ui-yield-to
Put it outside that div tag as follows
<div ui-yield-to="modals"></div>
<div ui-content-for="modals">
<div class="modal" ui-if="modal1" ui-state="modal1">
....your model html code
</div>
</div>
So that modals will remain as a place holder