I am creating a bootstrap popover and I'm trying to use a directive in the content of the popover.
I use the following HTML:
<div data-animation="false"
data-template='<div style="width: 400px; max-width: 400px; height: 400px; max-height: 400px;" class="popover some-custom-classes" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
data-html='true'
data-placement='right'
data-original-title='My title'
data-content='<b>TEST</b> <my-directive></my-directive> TEST'
data-trigger='manual'
data-container=".modal-dialog">
Some Content
</div>
Whenever a hover over the DIV happens, somewhere in code I do:
$element.popover("show");
This does launch a popover with the contents:
"TEST TEST"
However, the directive is not shown. It is not picked up by angular and thus the browser ignores it because it doesn't know the "my-directive" element. I think Angular doesn't pick it up because the directive is added to the DOM dynamically (independ from angular) using jquery by bootstrap's popover implementation.
The question:
Is there a way to manually tell angular to "parse" the directive?
PS. I think in the newer versions of ui-bootstrap you can specify an angular template, but unfortunately I can't use ui-bootstrap (except the ancient version 0.10.0 which seems not to work for me with popovers).
Related
I have an issue which presents on an Android 4.x device, but not on a newer device. I have no idea why, but I'm hoping someone can help.
I have a list using ng-repeat. Each item uses ng-include to load a template dynamically (this is a generic, reusable dialog).
<ons-list-item ng-repeat="item in items | filter:filterItems(searchTerm) as filtered" ng-click="options.selectItem(item)" style="font-size: 14px; padding: 0;" tappable>
<div class="left" style="width: 100%;">
<ng-include src="'app/dialog/smartpick/'+options.itemTemplate" style="width: 100%; padding: 0px 16px;"></ng-include>
</div>
</ons-list-item>
The template currently causing me issues contains a button like this:
<ons-button ng-click="openDocument(item, $event)" ng-if="item.SpecificationSpecDocumentID" style="float: right;font-size: 20px !important; padding: 0px 10px;">
<ons-icon icon="ion-image" ng-hide="item.opening" style="vertical-align: middle;"></ons-icon>
<ons-icon icon="ion-load-b" ng-show="item.opening" class="spin" style="vertical-align: middle;"></ons-icon>
</ons-button>
Debug: {{ item.opening }}
When openDocument is called, it does this (among other things):
if(item.opening) return;
item.opening = true;
When the list is rendered, both of the <ons-icon> elements are shown; the ng-show/ng-hide directives do not seem to do anything. The debug text under the button shows true or false respectively, but no class or style is added to the icon elements. (I also tried isolating the problem by moving the directives to wrapper <span> elements, but it didn't have any effect.)
As I said before, this work fine on a newer device. Any clues as to what may cause directives to fail or be ignored on older devices?
EDIT
It certainly has something to do with the child scope created inside the <ons-button> element, because the directives work outside of that scope. I just don't know why it would work in newer webviews but not the older one.
I still don't know what the browser version had to do with it, but it seems the problem was a consequence of using ng-if in my templates. When I changed those into ng-show, the problem disappeared.
How can I unable website preview feature on all of the links in my web page? That is when the user moves the mouse over any link in the page, I want to show a simple pop up window which loads the page in link. I tried doing it on my own with help of Google and stackoverflow. But result got something like this -
(ACTUAL PAGE LINK RENDERING)
How should I fix this? I wanted to have it similar to Google instant preview.
Here is my code - (website links are fetched from web service)
html file
<div class="text-result" *ngIf="Display('all')">
<div *ngFor="let item of items$|async" class="result">
<div class="frame">
<script>
$(".head-link").mouseover(function() {
$(this).children(".tooltip").show();
}).mouseout(function () {
$(this).children(".tooltip").hide();
});
</script>
<div class="title">
<a href="{{item.link}}" class="head-link">{{item.title}}
<iframe id="tooltip" src="{{item.link}}"></iframe>
</a>
</div>
</div>
<div class="link">
<p>{{item.link}}</p>
</div>
<div>
{{item.pubDate|date:'fullDate'}}
</div>
</div>
</div>
css file
.head-link {
color: #069;
cursor: pointer;
}
.tooltip {
display: none;
position: absolute;
border: 1px solid #000;
width: 400px;
height: 400px;
}
I setup a minimal JS fiddle for you, and I believe I resolve the issue.
A summary of my changes is:
Your iframe has an id=tooltip, when you are referencing it as .tooltip, so I changed it to class=tooltip.
Your jQuery script has to appear after the elements on the page that are used by it, so I moved the script tags to the bottom of the class=text-results div.
Two notes:
First, this isn't an Angular 2 problem, you are using Angular 2 in your project, but the problem is with your jQuery code.
Second, you really should avoid using jQuery to solve your problems within an Angular 2 project. Angular 2 has the capability to solve this problem without needing to include jQuery. Mixing jQuery and Angular 2 will result in messy and hard to understand code, you are much better off trying to solve this problem using only Angular 2.
I am building an application for a multi-touchscreen and wanted to use the angular material datepicker.
Even though it works fine when using it with a normal mouse, when I tried using it on my touchscreen, the datepicker is not scrollable. I do not really know what I am doing wrong, as the examples on the angular material page are working.
So this is the code: (I kind of tried it everywhere on my page, so it does not really matter what is around this code as it did not work anywhere else as well):
<div style="margin-top: 10px">
<h5>Daterange:</h5>
<md-datepicker style="padding-right: 0px; margin-right: 18px" md-placeholder="From" ng-model="searchStartDate" md-max-date="searchEndDate" ng-change="clearShipSearch(); shipSearch()"></md-datepicker>
-
<md-datepicker md-placeholder="To" ng-model="searchEndDate" md-min-date="searchStartDate" ng-change="clearShipSearch(); shipSearch()"></md-datepicker>
</div>
I have a Windows Phone app using HTML5 and Javascript.
I am using WinJS.Utilities.empty(); to clear the DIV element and then WinJS.UI.Pages.render(); to load pages in to the same DIV:
On one of the pages that is loaded in, I am trying to use a Pivot Control, I am using it declaritively like this:
<div id="MyAccountPivot" data-win-control="WinJS.UI.Pivot" data-win-options="{title: 'MyAccount'}">
<div data-win-control="WinJS.UI.PivotItem"
data-win-options="{ header: 'current' }">
<div id="current">
Lorum Ipsum...
</div>
</div>
</div>
When the page is loaded in, the Pivot control loads and renders, and the PivotItem headers render correctly. But when the content has been rendered, it is not visible. I have used the DOM explorer in Visual Studio to interrogate the markup and styling to find the issue. It appears that the container DIV elements for the PivotItem contents are out of place and are hidden behind the DIV that contains the PivotItem headers...
When I have tried using this markup in the parent page (rendered without using the WinJS.UI.Pages.render();) it works exactly as expected.
I have also tried creating the Pivot and its Items programmatically, but this produces the same results.
Any help would be greatly appreciated.
Getting me same issue while showing content without template, make some changes in css and it's works for me.
HTML
<div class="myPivot">
<div data-win-control="WinJS.UI.Pivot">
<div data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'one' }">
-- item content---
</div>
</div>
</div>
CSS
.myPivot {
}
.myPivot div.win-pivot-item {
left:0px !important;
visibility: visible;
width:100%;
}
.myPivot .win-pivot .win-pivot-surface {
width: 100%;
position: fixed;
}
I am using Django CMS 3.0.3. I've written a cms plugin with 2 CMSPluginBase derived classes, one adds a slider to a placeholder and another one is for adding slides as children to the slider.
In live mode everything works fine, but when I am editing content, I can't use the slider. The reason is that django-cms is decorating the html code with additional elements like this:
<div class="slider">
<div class="cms_plugin cms_plugin-2" style="width: 0px; overflow: hidden; position: absolute; left: 0px; display: block;">
<!-- Slider Item -->
<div class="slider-item"> [MY SLIDER CONTENT] </div>
<!-- /Slider Item -->
</div>
</div>
I got the HTML/CSS/JS from somebody else and I would preferable not use another slider. What options do I have to work around this problem?
Is there a way in django-cms to switch off the wrapping of plugins in "content mode" only, but to have the placeholder <div> included in "structure mode"? That would not be super convenient, but a workaround that I can live with.
Is there something else, I could do? I don't want to touch the slider itself. It might get an update and then I'd have to adjust it to adjust the slider to my needs again.
django-cms is need to wrap your plugin with <div class="cms_plugin cms_plugin-2"> for relation with "structure mode". There are no other variants.