first let me say that I am newbie with ionic, I tried find my solution in Google, but now the information is mixed with ionic 1, ionic 2 and now "ionic 3".
I need do a dropdown menu which I call "create method" with parameters and this method draw menu with options.
I tested different methods, first try modify popups, then modals, but I can't solve my problem.
I need know the best form to do this, I think that I should make external component and use his methods to do what I want. I used Sencha Touch so far now, and I used this code to this:
Ext.create("Amix.view.general.Menu",{
options : options,
callback : callback
});
Ext.define('Amix.view.general.Menu',{
extend: 'Ext.panel',
...
listeners: {
initialize: function(){
Ext.Viewport.add(this);
...
This is what I want:
Also, what is the best form to select item of the DOM? In sencha I used Ext.getCmp() or Ext.select(), $() on jQuery, or document.queryselector on JavaScript.
As per your screenshot, you need ionic Popover. For Ionic 2.x and 3.x there inbuilt component by ionic Popover
You can use this simply importing to your page
import { PopoverController } from 'ionic-angular';
#Component({})
class MyPage {
constructor(public popoverCtrl: PopoverController) {}
presentPopover(myEvent) {
let popover = this.popoverCtrl.create(PopoverPage);
popover.present({
ev: myEvent
});
}
}
See demo here
Related
I have an old Angular1.5 app, quite a large code base.
I'm now using ngReact to instance React from within an angular directive.
This is all working correctly. My new react 'sub-app' for want of a better phrase is working ok.
But now I need to call an ng-click in part of the old Angular app from React. The Angular ng-click then pops up a modal. The ng-click in the controller is in scope so it's available i.e. it's module is loaded into the browser.
Any ideas how to do this ?
I do have Redux instanced in Angular using ngRedux and available in React, could I dispatch from React and get the controller to respond to this dispatch / action ?
Does this seem ok ?
The answer to my question is yes, I can use Redux and subscribe to the redux state change in the angular controller with something like this
var unsubscribeRedux = $ngRedux.connect(this.mapStateToThis, fireAddTaskEvent )(this);
$scope.$on('$destroy', unsubscribeRedux);
this.mapStateToThis = function(state) {
console.log("fired from react");
return {
value: state.addTasks
};
}
It's crude at the moment, but works
I'm using Datatables with AngularJS and the FixedHeader plugin which works fine when the table is displayed on the page. My issue is that when I navigate to a different page (single page application) using angular UI router, the FixedHeader header still shows.
Does anybody know why this is the case?
It looks like that is an issue with the FixedHeader plugin to DataTables.
There is an angular-DataTables module at https://l-lin.github.io/angular-datatables/#/welcome, which has a page about the plugins that work with it. This page lists the FixedHeader plugin and mentions the same issue you are seeing.
See https://l-lin.github.io/angular-datatables/#/withFixedHeader.
This page says the following:
Beware when using routers. It seems that the header and footer stay in
your DOM even when you change your application state. So you will need
to tweak your code to remove them when exiting the state.
It also shows a workaround for angular-ui-router:
$stateProvider.state("contacts", {
templateUrl: 'somewhereInDaSpace',
controller: function($scope, title){
// Do your stuff
},
onEnter: function(title){
// Do your stuff
},
onExit: function(){
// Remove the DataTables FixedHeader plugin's headers and footers
var fixedHeaderEle = document.getElementsByClassName('fixedHeader');
angular.element(fixedHeaderEle).remove();
var fixedFooterEle = document.getElementsByClassName('fixedFooter');
angular.element(fixedFooterEle).remove();
}
});
in my extjs app, i create a panel, i also add jquery to one page, however when i click the test section in this page, this page don't render test alert, it seems extjs panel forbid the jquery function. is there any solution to load both html and js to panel content.
relative code below:
var feedback=Ext.create('Ext.panel.Panel', {
title: 'Hello',
layout: 'fit',
autoScroll: true,
bodyStyle:{"background-color":"#fed"},
html: '<div id="test">test</div>',
});
....
$("#test").click(function(){
alert('test')
})
By experience, mixing jquery selector and Extjs element can be pain to manage together. I would suggest to use Ext js selector to do what you're trying to achieve in jquery, since it's pretty basic. However, if you still want to use jquery, using on() function could help, the object is maybe not rendered yet when your jquery code is reached.
$("#test").on('click', function(){
alert('test')
})
I need to open a backbone template in a new window. Is this possible? Currently I've got a template that is being displayed within a div but I need this content to display in a new window? I thought using a route might be the way to go but I'm not sure.
I'm a noob to backbone so there's probably a better way to do this.
In my view I've got:
events:
{
'click #active-bets' : 'loadActiveBetsPage',
}
loadActiveBetsPage: function(e)
{
var MyApp = new Backbone.Router();
MyApp.navigate('activebets', {trigger: true});
// , {trigger: true, target: "_blank"}
},
I thought I might get lucky and be able to pass a target: "_blank" parameter here.
in my routes sections:
var AppRouter = Backbone.Router.extend({
routes: {
":activebets" : "renderActiveBets",
"*actions" : "defaultRoute"
} });
app_router.on('route:renderActiveBets', function () {
$this.activeBetsView = new ActiveBetsView( { el: $this.elAccountInfo });
$this.activeBetsView.render();
/* thought something like this might help possibly
if ($(event.currentTarget).prop('target') === '_blank') {
return true;
}
*/
});`
Thank you in advance for any help on this one.
No, this is not possible and especially not with the Backbone Router directly.
The only ways to open new browser windows from a webpage are using the window.open javascript method. It will open a new browser window that directs to the URL specified. Note that the the page you have created and the page you started at are independent of each other and there is no way to communicate between them via javascript.
The other way is to have an anchor tag with the target -attribute, which results in clicking the link opening a new window/tab.
What you can do:
Use a dialog created with html to simulate a new window, e.g. jQuery UI Dialog
Create a separate webpage to display this information, open a new browser window and direct the new window to this webpage.
Update based on last comment:
"...there is no way to communicate between them via javascript."
Since HTML5, the solution for this is HTML5 Web Storage.
window.localStorage
is API that can communicate with all open tabs and windows in browser.
I'm using angular-ui / bootstrap $dialog service
It's possible to load a partial inside messageBox? I would take the title and footer, changing only the message param. Thus, it would not be necessary to include the header and footer in partial template.
In this example http://plnkr.co/edit/ttobdpirZlnEQBE3LOeZ, illustrated the behavior I expect by clicking on the 'msg products'.
No. The messageBox method is meant to quickly create message boxes with the consistent look & feel. The idea behind this method is that you can quickly create alert-like messages that have consistent look & feel across the whole application.
As you've noticed the open method is a more flexible version and allows you to create any modal dialog with a partial specified by you.
If you would like to create many dialogs that use the same template you could wrap the $dialog service into your own service, for example:
app.factory('productsDialog', function($dialog){
return function(products) {
return $dialog.dialog({
templateUrl: 'products.html',
controller: 'DialogCtrl',
resolve: {products: function() { return products; }}
});
};
});
and use it like so:
$scope.dlgProduct = function(){
productsDialog($scope.products).open();
};
Here is a working plunk: http://plnkr.co/edit/L2fd7b4y3woLDJmNiN3Y?p=preview