I have an ionic project where I want to add a dynamic amount of buttons to the page.
On the page there is just an image. And I need to inject these buttons on top of the image.
So I get data from the web where the buttons have to be. (position)
How can I inject HTML Code from a controller like:
<button class="hotpoint" style="position: absolute; top: 10pt; left: 10pt"></button>
to the page.
I need something like:
for(var obj in objects)
{
$scope.addHTML("<button style="top: obj.y; left: obj.x;">...</button>");
}
How can I achieve this?
Thanks
So I resolved the problem by myself.
The trick was "ng-bind-html"
In index.html I've added a div with:
<div ng-bind-html="hotpoints"></div>
And then I can inject HTML Code in the controller like this:
$scope.hotpoints = $sce.trustAsHtml('<a id="but" class="hotpoint animated infinite" style="top: 100pt; left: 100pt;"></a>');
Related
Under my root div react creates another div "automatically". Is there a way to add a class to that div? I need to add height: 100% to it to prevent the background content to scroll in mobile when an overlay is shown.
This is how it is shown when i inspect the element on the site. I need to add height:100% to the data-reactroot div when a button is clicked. But that div is nowhere in my source code.
<div id="root">
<div data-reactroot data-reactid="1" data-react-checksum="161698...
I could add this code in the container's componentDidMount()
let root = document.querySelectorAll('[data-reactroot]')[0];
if (root) {
root.style.height = '100%';
}
But isnt there a better way to do it? This feels like kind of hacky (in a bad way)
#root > [data-reactroot] { height: 100% } in your CSS should work.
Or just the tag itself:
[data-reactroot] { ... }
If you want to use in-line css, just make your top div position is absolute and left, top, right, bottom is zero.
So if you inspect the element:
<div id="root">
<div data-reactroot>
<div style="position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px>
....
So simple by using the id reference
#root{
/* your css here! */
}
Hi I'm adding a popover to UI grid in AngularJS. The idea is when the user mouse-over a row a popover will show up, and the popover contains a directive. I've successfully implemented this part, but now the problem is that part of the popover is blocked by the ui grid table, like this:
I want to bring the popover to the front, and I've tried setting z-index for both the ui grid table and the popover. Related code is here:
JS part:
function rowTemplate() {
var template = [];
...
template.push('popover-template="\'popover.html\'" popover-placement="bottom" popover-trigger="click"></div>');
return template.join(' ' );
}
HTML:
<div class="gridStyle" ui-grid="vm.grid" ui-grid-resize-column ui-grid-selection style="margin-top:0px; height:200px; z-index: 4; position: relative">
</div>
<script type="text/ng-template" id="popover.html">
<div style="height: 150px; width: 600px; overflow-x: auto; overflow-y: hidden; z-index: 10; position: relative">
<directive-related part />
</div>
</script>
But after I set the z-index it's still not working. How can I resolve this?
Some of my references are here: popover: popover, z-index: z-index.
Thanks!
Note: I am making the assumption here that you are using ui-bootstrap.
I have found that usually you need to use the append-to-body attribute with ui-grid custom formats.
Try changing the template like so to add that attribute:
template.push('popover-template="\'popover.html\'" popover-append-to-body="true" popover-placement="bottom" popover-trigger="click"></div>')
I created a web page using on angular. My page is loading very slow. Taking 5 to 10 sec.
In meanwhile, I want to show some loading image or spinning gif.
In below js fiddle achive the above problem in javascript. I want to use this functionality in the angular js
html
<body>
<div id="load"></div>
<div id="contents">
jlkjjlkjlkjlkjlklk
</div>
js
document.onreadystatechange = function () {
var state = document.readyState
if (state == 'interactive') {
document.getElementById('contents').style.visibility="hidden";
} else if (state == 'complete') {
setTimeout(function(){
document.getElementById('interactive');
document.getElementById('load').style.visibility="hidden";
document.getElementById('contents').style.visibility="visible";
},10000);
}
}
css
#load{
width:100%;
height:100%;
position:fixed;
z-index:9999;
background:url("https://www.creditmutuel.fr/cmne/fr/banques/webservices/nswr/images/loading.gif") no-repeat center center rgba(0,0,0,0.25)
`http://jsfiddle.net/d9ngT/
You need to use ngCloack.
https://docs.angularjs.org/api/ng/directive/ngCloak
And if you need to define a fullscreen loader while your angular app is starting, than create din element on your page and assign to it classes full-screen-loader and ng-cloack
Your css
.ng-cloack {
z-index: 9999;
}
.full-screen-loader {
position: fixed;
width: 100%;
height: 100%;
z-index: -9999;
}
Your html
<div class="full-screen-loader ng-cloak">
<img class="additional-styling" src="some-loader.gif">
</div>
While your angular app is being loaded, ng-clock class will set z-index of your loader container to be on top of every other content on the page. And when angular will be loaded, your loader container will be brought to the bottom of everyything on the page. Also i want to mention, that you may need to add some styling to body and html tags, so your loader will take all the browser's window space.
I'm new in AngularJS, how can i show popup a div on mouseover using AngularJS. If i resize a div on mouseover, it changes whole structure, how to show popup div without disturbing neighbors elements.
Markup
<div ng-repeat="x in images | filter:test" style="float:left; width:30%" ng-mouseover="count=1" ng-mouseleave="count=0" >
<img ng-src="{{x.path}}"
style="width: 100px; height:100px"><div> {{x.company}}</div>
<div style="background-color:#E6E6FA;text-align: center;"ng-show="count">
price:{{x.price}}</br>
size:{{x.size}}</br>
</div>
</img>
<div/>
I added extra things in markup like company,size on mouseover. help me in pop a image on mouseover. Thanks in advance
You have to do two things. First you have to position your popover element absolute, so that it doesn't disturb the flow of the other elements when it pops up. Something like this (z-index is what makes it to be over the other elements):
.popover {
position: absolute;
z-index: 100;
}
And in your html-markup you can use the ng-mouseover directive.
<div ng-mouseover="showPopover()" ng-mouseleave="hidePopover()">
more info
</div>
<div class="popover" ng-show="popoverIsVisible">Popover Content</div>
Your angular controller will probably look something like this
$scope.showPopover = function() {
$scope.popoverIsVisible = true;
};
$scope.hidePopover = function () {
$scope.popoverIsVisible = false;
};
If you have more than one, you are probably better of putting all that stuff into a directive
I have an api end point which return an image in response. So, I directly bind the ng-src for an image tag with my end point that looks like this
<img data-ng-src="https://loventedtest.appspot.com/image/255fe126-bfa8-4b7b-ac14-b53751b88470" />
What I am wondering is to show upfront image until the image get load from the server or keep the upfront image if the image not found on the server. I am not sure, how can I make it possible, any suggestion please?
See this Plunkr for more details.
Maybe you can resolve your problem with css. In you html :
<img class="img-wrapped" ng-src="{{ imgSrc }}">
in your css :
.img-wrapped {
width: 200px;
height: 200px;
background-image: url(http://www.placehold.it/200x200);
}
For compatibility purposes (tested on Firefox too), you may wrap your img.
Markup :
<div class="img-wrapper">
<img ng-src="{{ imgSrc }}">
</div>
css :
.img-wrapper {
width: 200px;
height: 200px;
background-image: url(http://www.placehold.it/200x200);
}
See the updated Plunkr
ng-src allows you to use data binding. You can have a string called $scope.imageUrl in your controller, and use
img data-ng-src="{{imageUrl}}"
in your html file. You can then change that variable's value in your controller and it will change that image automatically.