issue with paper menu fired on-iron-selected event - polymer-1.0

I would like to ask your help on this, because I didn't find a solution for this and I tried to find answers on Google and I didn't find anything.
I have a project with Polymer Starter Kit, in the Index.html I'm using a <paper-menu>. I would like to fire the event on-iron-selected event. This is what I did:
<paper-menu attr-for-selected="data-route" selected="[[route]]" id="general_menu" class="hiddenStruct" on-iron-select="handleItemSelect">
My problem is that I really don't know where I have to implement the event. I tried to do something like this in the app.js:
handleItemSelect: function(event, detail, sender){alert("Entro");}
But I got error in the console.
Can anyone of you help me to know in what place I have to implement this?
Thanks in advance

The solution for this is:
Implement the following code inside the the app.js:
(function(document) {
app.handleItemSelect = function(event, detail, sender){
alert("Example");
};
})(document);
I hope this helped to somebody else with the same problem.

Related

AngularJS Feedback directive

I'm trying to implement what looks to be a really cool feedback directive but can't seem to even get the button to display...?
I went through the set up as described on the github page but no luck. This code was originally commented out:
`templateUrl: function(element, attributes) {
return attributes.template || "angularsendfeedback.html";
},`
so I just uncommented it... thinking I could just use that as the default HTML to get things going. The default "angularsendfeedback.html" is blank but it seemed like it already had default html in the js file.
Am I missing something or is the directive missing something? Is there another simple AngularJS directive for feedback out there... somewhere? Any recommendations?

$modal causes page to freeze in IE11

I use the following code snippet to show a simple modal:
$modal({
title: 'My Title',
template: 'path/to/my/simple.modal.html',
show: true,
scope: $scope
});
After closing the modal some parts of my webpage do not react to any events. In all other browsers this is working fine.
It's also really strange that I am not able to inspect some of the elements after closing the modal, all elements are shown as one single element (when using the Inspector-Tools in IE). After found one inspectable item, all the other items are getting inspectable as well. After inspecting for some moments, there is no freezed part again ... it's a really strange behaviour.
Does anybody else have this behaviour ?
I am using Angular 1.5 and Angular-Strap 2.3.7.
Thanks in advance !
Sad, that there were no further hints on this.
I looked in the angular-strap bug-list for a solution and found one :
Just call $destroy(); after hiding the modal did the trick for me.
Best !
I Know this question is answered. but this is for share some info on that same issue.
Recently I also came across with that issue. In my case the reason was a CSS attribute Display:block. So after I turn the value from block to none my freezing error went off and it worked like a charm. So first right after you get that error check in Inspection whether the resulting div where the modal is loaded has a style = "Display:block" in it. If so remove it by a script or etc.
Hope this will help to improve this question.

Can I run a function instead of routing on otherwise in Angular?

As my question asks, I want to know if that is possible. Why I want this? I am required to keep the link when the request fails so I use states in my bootstrap template instead of templates for the error pages. Now I need to catch everything that isn't registered and I need to tell my main controller to change the state if the route is not found. I checked the documentation, of course but it hasn't enlightened me so please help me out here if you can.
$httpProvider.otherwise(function () {
// code here
});
Is something like this possible?

Check if $modal is open similar to $dialog.isOpen

I'm migrating from AngularJS 1.1.15 to 1.3.15 and my current issue is getting $modal to work instead of $dialog.
If anyone has any helpful links regarding the migration would be appreciated :) I'm currently handling it per-bug fix.
To my current question:
My previous code was looking like:
var msgBox = $dialog.dialog({ ... });
msgBox.open().then(......);
And I changed it to
var msgBox = $modal.open(...);
msgBox.opened.then(......);
So now the issue i'm experiencing is having an IF:
if (msgBox && msgBox.isOpen())
How do I implement it with $modal? From the documentation here I don't see there is a replacement for isOpen.
On most stackoverflow questions I saw people suggesting to use jQuery, but its pretty messy and I rather avoid that.
Thanks for the help
I'm not aware of any "out of the box" solution for this, so I'm checking if a $modal is opened or closed by checking the statuses from the $modal.result promise. Here they are:
Pending (0)
Resolved (1)
Rejected (2)
You can check if a modal is open like this:
$modal.result.$$state.status === 1;
When you close it, the status changes to 2.
Hope it helps.

How to insert angular js code?

I'm actually doing an app for a stage, which has to be responsive design. So it has to work on Mobile, Computer and Tablet. For this app I need to use the google api Place Autocomplete. The problem with that is that it doesn't work on mobile, whether it's iOS or android... on another forum i found a piece of code which is the following, supposed to resolve this problem :
.directive('disableTap', function($timeout) {
  return {
    link: function() {
      $timeout(function() {
        // Find google places div
        _.findIndex(angular.element(document.querySelectorAll('.pac-container')), function(container) {
          // disable ionic data tab
          container.setAttribute('data-tap-disabled', 'true');
          // leave input field if google-address-entry is selected
          container.onclick = function() {
            document.getElementById('autocomplete').blur();
          };
        });
      },500);
    }
  };
});
The problem is that i've never used Angular JS in my life and i do'nt have the time to learn it now, maybe after i'm done with the app... and this function is supposed to make it works on mobile, but i don't know how to use it. Could you guys give me a hand and explain me how to insert this code in my project and how to use it? I'm really in need and some help would be very appreciated. by the way, i'm not english native so if you didn't udnerstand something in my post just tell i'll try to say it better ^-^
I hope you will be able to help me, thanks :)
This should be the same in jQuery, but you have to adapt it yourself. You require also the underscore.js library. Hope this helps.
window.setTimeout(function() {
// Find google places div
_.findIndex($(document.querySelectorAll('.pac-container')), function(container) {
// disable ionic data tab
container.setAttribute('data-tap-disabled', 'true');
// leave input field if google-address-entry is selected
container.onclick = function() {
$('#autocomplete').blur();
};
});
},500);

Resources