I'm using AngularJs and ngModal plugin (https://github.com/adamalbrecht/ngModal) in my project. When the Modal is shown, it disables the browser scroll bar. How do I enable it in the instance it is shown?
My html code is below:
html
<body ng-controller="MyMgtCtrl">
<div class="container-fluid" >
<div class="section">{{gapSection.headerID}}.{{gapSection.sectionID}}</div>
<label ng-click="showMenu()" class="label label-primary">Toggle</label>
<modal-dialog show='data.showMenu' class="showMenuStyle">
<p>SOMETHING GOES HERE</p>
</modal-dialog>
</div><!-- /.container -->
</body>
In the ng-modal plugin there was a property:
document.getElementsByTagName("body")[0].style.overflow = "hidden"
I set to "hidden" to "" and the scroll bars were present
Related
I´m trying to integrate swiper.js in my angularJs web app displaying background images. The library is working but the images are not properly displayed. Please see this plunker that is working exactly like my app.
http://plnkr.co/edit/ISdEZn?p=preview
Below the most relevant part:
<!-- Slider main container -->
<div class="swiper-container" swiper>
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<!--<div class="swiper-slide">Slide 1</div>-->
<!--<div class="swiper-slide">Slide 2</div>-->
<!--<div class="swiper-slide">Slide 3</div>-->
<div class="swiper-slide" ng-repeat="boatPhoto in boatPhotos" is-loaded>
<div style="margin:auto; background-image: url('//s3-eu-west-1.amazonaws.com/yanpy.dev/img/boats/13620/l/{{boatPhoto.name}}.{{boatPhoto.mime}}')">
</div>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
You need to set width and height of the div.
<div style="margin:auto;width:100%;height:100%; background-image: url('//s3-eu-west-1.amazonaws.com/yanpy.dev/img/boats/13620/l/{{boatPhoto.name}}.{{boatPhoto.mime}}')">
Hola
</div>
Updated plnkr demo
I'm testing an Angular site with Protractor and Jasmine framework.
How can i locate the mouse outside the tutorials popover that is displayed at the login time in order to hide this popover to test the home page?
Here the html code that contain the button of tutorial (previous; next; don't show again) :
</div></md-card-content> </md-card><!-- end ngIf: !expandChart --> </div> </div> </div></md-content> </div></div> <!-- Google Analytics: change UA-XXXXX-X to be your site's ID --> <!--<script>--> <!--!function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){--> <!--(A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),--> <!--r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)--> <!--}(window,document,'script','https://www.google-analytics.com/analytics.js','ga');--> <!--ga('create', 'UA-XXXXX-X');--> <!--ga('send', 'pageview');--> <!--</script>--> <script src="scripts/vendor.js"></script> <script src="cordova.js"></script> <script src="scripts/scripts.js"></script> <script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha1.js"></script> <script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha256.js"></script> <script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/components/enc-base64-min.js"></script> <div class="introjs-overlay" style="top: 0;bottom: 0; left: 0;right: 0;position: fixed;opacity: 0.8;"></div><div class="introjs-helperLayer " style="width: 538px; height:366px; top:64px;left: 195px;"></div><div class="introjs-tooltipReferenceLayer" style="width: 538px; height:366px; top:64px;left: 195px;"><div class="introjs-tooltip" style="left: 546px;"><div class="introjs-tooltiptext">Watchlist view. Swipe the row in the grid to the left to show the delete action.</div><div class="introjs-bullets"><ul><li><a class="active" href="javascript:void(0);" data-stepnumber="1"> </a></li><li> </li><li> </li><li> </li><li> </li><li> </li><li> </li><li> </li></ul></div><div class="introjs-progress" style="display: none;"><div class="introjs-progressbar" style="width:12.5%;"></div></div><div class="introjs-arrow left" style="display: inherit;"></div><div class="introjs-tooltipbuttons"><a class="introjs-button introjs-skipbutton" href="javascript:void(0);">Don't show it again!</a>PreviousNext</div></div></div></body></html>
I have this simple audio for mediaElement.js which works with normal HTML/Js but does not work with angularjs. The Media player is shown just fine but clicking play button does not work.
<div class="col-md-6">
<div class="alert alert" ng-repeat="media in medias">
<h3>{{media.title}}</h3>
<p>{{media.summary}}</p>
<audio id="{{media.filename}}" src="http://danosongs.com/music/danosongs.com-orb-of-envisage.mp3" type="audio/mp3" controls="controls">
</div>
</div>
<script>
// using jQuery
$('video,audio').mediaelementplayer(/* Options */);
</script>
![enter image description here][1]
I found the problem thanks to #Biswanath. I was loading Mediaelement before Angular finished loading the elements. So I had to call it when all elements are loaded. Googling I found the solution here and here is my HTML codes
<div class="alert alert" ng-repeat="media in medias" ng-init="$last ? loadMediaElement() : false">
Then in my controller scope, I register Javascript function which bootstraps MediaElementjs, since ng-repeat is done
$scope.loadMediaElement = function()
{
$('video,audio').mediaelementplayer(/* Options */);
};
I have this template inside of my datagrid:
<div id="grid" data-ng-controller="UsersCtrl" data-ng-init="initGrid()" >
<script type="text/x-kendo-template" id="preparedViewsToolbar" ng-init="initPreparedViews()">
<div class="toolbar">
<!-- SAVE CUSTOM VIEW BTN -->
<a class="k-button k-button-icontext k-grid-save-changes"
data-ng-controller="UsersCtrl"
ng-click="showCustomViewModal();">
Add actual selection to custom views
</a>
</div>
</script>
</div>
I injecting template inside of the datagrid toolbar:
{ template: kendo.template($("#preparedViewsToolbar").html()) },
Template is correctly displayed in datagrid but after click is not firing predefined action on controller.
I tried to find any working solutions for a few hours, but without luck.
Thanks for any advice.
I'm using the collapse feature of UI-Bootstrap (http://angular-ui.github.io/bootstrap/#/collapse) but when I use the collapse/toggle it loses the data and just returns "true".
Here is a Plunker to show my issue, http://plnkr.co/edit/e689Wureay8AMZQ9IIno?p=preview
A snippet from the code:
<div ng-repeat="name in names | filter:radioModel:true">
<span ng-model="namesList" ng-click="name = !name">Toggle collapse {{name.firstName}}</span>
<hr>
<div ng-show="name">
<div class="well well-large">{{name}} -</div>
</div>
That is because you are overwriting name in the ng-click here: ng-click="name = !name". That will make name true or false, depending on how many times ng-click was invoked.
What you want is to toggle a property on the model to collapse/uncollapse the following detail:
<div ng-repeat="name in names | filter:radioModel:true" >
<!-- change the property name.collapsed -->
<span ng-model="namesList" ng-click="name.collapsed = !name.collapsed">Toggle collapse {{name.firstName}}</span>
<hr>
<!-- use ng-hide to "collapse" -->
<div ng-hide="!!name.collapsed">
<div class="well well-large">{{name}} -</div>
</div>
</div>
Working demo: http://plnkr.co/edit/at7ceCYDXwWWlqUlKnkQ?p=preview