I am new with Polymer, I was trying to build an app using vaadin' combobox, but the value-changed event is never fired...
In my html I have:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/vaadin-combo-box/vaadin-combo-box.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="fast-purchase-data">
<template>
<iron-ajax id="placesListAjax" url="../mock-responses/places.json" last-response="{{places}}"></iron-ajax>
<vaadin-combo-box value-changed="valueChange" label="Places" class="combobox elements-box" items="[[places.data.elements]]" item-label-path="name"></vaadin-combo-box>
<iron-ajax id="eventsListAjax" url="../mock-responses/events-list.json" last-response="{{resp}}" auto></iron-ajax>
<vaadin-combo-box value-changed="valueChange" label="Events" class="combobox" items="[[resp.data.elements]]" item-label-path="name"></vaadin-combo-box>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'fast-purchase-data',
valueChange: function(ev, i){
console.log("hey");
},
_pageChanged: function() {
this.$.placesListAjax.generateRequest();
},
});
})();
</script>
</dom-module>
I can see data in my combobox, but when I change its value I can't see the console.log neither an error. What am I missing?
The proper way to add event listeners declaratively is using on-event-name (docs).
So in your case it should be as follows.
<vaadin-combo-box on-value-changed="valueChange" ></vaadin-combo-box>
Related
I hope you can help me out or give me a hint to solve my problem.
I am making an app using angularjs and material design lite (css and js).
My problem is that the material design js file doesn't take affect on the partials once the state changes and basically I lost all the functionality that material design library provides me.
this is my code so far
index.html
<!doctype html>
<html ng-app="app">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Appy2go</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<!-- Material Design Lite -->
<script src="dist/js/material.min.js"></script>
<link rel="stylesheet" href="dist/css/material.pink-blue.min.css">
<!-- <script src="https://code.getmdl.io/1.2.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.indigo-pink.min.css"> -->
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script src="https://cdn.rawgit.com/auth0/angular-storage/master/dist/angular-storage.js"></script>
<script src="https://cdn.rawgit.com/auth0/angular-jwt/master/dist/angular-jwt.js"></script>
<script src="app.js"></script>
<script src="modules/home/home.js"></script>
<script src="modules/signin/signin.js"></script>
<link rel="stylesheet" href="dist/css/style.css">
</head>
<body>
<div id="app-wrapper" ui-view></div>
<!--THIS BUTTON WORKS AS SUPPOSED TO BE-->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Button
</button>
</body>
</html>
app.js
angular.module('app',[
'ui.router',
'app.home',
'app.signin'
])
.config(function($urlRouterProvider){
$urlRouterProvider.otherwise('/');
})
.controller('AppController',function($scope){
console.log("ready");
})
home module
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout-icon"></div> <!-- IT SHOULD DISPLAY AN ICON ON SMALL DEVICES -->
<div class="mdl-layout__header-row">
<span class="mdl-layout__title">App Name</span>
</div>
</header>
<div class="mdl-layout__drawer">
<span class="mdl-layout__title">App Name</span>
<nav class="mdl-navigation">
link 1
link 2
link 3
</nav>
</div>
<main class="mdl-layout__content">
<div>Content</div>
<!-- Colored FAB button with ripple -->
<!-- Accent-colored raised button with ripple -->
<!-- THIS BUTTON DOESN'T WORK AS SUPPOSED TO BE -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
Button
</button>
</main>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__right-section">
<div class="mdl-logo">Appy2go</div>
<ul class="mdl-mini-footer__link-list">
<li>Help</li>
<li>Privacy & Terms</li>
</ul>
</div>
</footer>
</div>
home.js
angular.module('app.home',[
'ui.router'
])
.config(function($stateProvider){
$stateProvider.state('home',{
url:'/',
controller: 'HomeController',
templateUrl: 'modules/home/home.html',
})
})
.controller('HomeController',function($scope,$http){
console.log("Ready");
})
Angular has to know when to look for changes in the variables. If you have non-angular code changing things then you have to tell angular to rerun the digest cycle.
Here's an example where I wrapped the jQuery Dialog function in Angular. I'm having to manually tell Angular to WATCH and APPLY.
app.directive("dialog", function() {
return {
restrict: 'A',
scope: {
dialog:"=",
},
controller: function($scope) {
$scope.$watch("dialog", function(){
if($scope.dialog){
$scope.open();
}else{
$scope.close();
}
});
},
link: {
pre: function(scope, element, attributes) {
scope.open = function() {
element.dialog({
height: attributes.height,
width: attributes.width
});
};
scope.close = function() {
element.dialog("close");
};
},
post: function(scope, element, attributes) {
scope.open();
element.on("dialogclose", function(){
if(scope.dialog){
scope.dialog = false;
scope.$apply();
}
});
}
},
};
});
Rest of the code is here.
https://plnkr.co/edit/myBzYyL2BHOP8CtRpqrr?p=info
Your routing code should be in the first module which is the main module. I feel that's where your problem is, I am not on a PC right now to be able to replicate your code and test. But change that first.
I'm using the Chosen plugin with AngularJS and Bootstrap. I'm also using a custom directive with code from the Chosen documentation for styling with Bootstrap:
app.directive("chosen", [function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var config = {
'.chosen-select' : {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {width:"95%"}
};
for (var selector in config) {
$(selector).chosen(config[selector]);
}
}
};
}]);
But when I apply this directive to the select box, it prevents the model from updating with the selected items. I've tried using chosen-bootstrap css and angular-chosen but cannot get it to work. Both left the select box unstyled (same as removing the custom directive) which leads me to believe it's an issue with Bootstrap.
Here's the issue recreated in Plunker: http://plnkr.co/edit/AE1jo9fiRN1pvU6dKFSI?p=preview
If you remove the "chosen-select" class on the select element it works fine but is not styled properly.
Any help would be much appreciated.
After a bit of googling seems like moving jQuery before Angular solved some other people's issues with Chosen + ng-model not updating. Your Plunker worked after I moved the script reference to jQuery before Angular.
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet" />
<link href="style.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.min.css" rel="stylesheet" />
<script data-require="jquery#2.1.4" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8" data-require="angular.js#1.4.8"></script>
<script src="https://code.angularjs.org/1.4.8/angular-route.js" data-semver="1.4.8" data-require="angular-route#1.4.8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.proto.min.js"></script>
<script src="script.js"></script>
</head>
See working Plunker here: http://plnkr.co/edit/ISqrJiiYB3a0ATkR1Dei?p=preview
It works normally, but doesn't work after an ngClick.
Why is this?
How should this be dealt with if you do want it to work after an ngClick?
It actually works in the snippet below, but doesn't work in this Plunker, and also doesn't work in my app.
It also never works more than once in any of the three places, and I don't know why that is.
angular
.module('app', ['ui.bootstrap'])
.controller('MainController', MainController)
;
function MainController() {
var vm = this;
vm.updateSuccess = false;
vm.closeUpdateSuccess = function() {
console.log('closeUpdateSuccess');
vm.updateSuccess = false;
};
vm.submit = function() {
vm.updateSuccess = true;
};
}
<!DOCTYPE html>
<html ng-app='app'>
<head>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="ui-bootstrap#0.13.3" data-semver="0.13.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js'></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller='MainController as vm'>
<alert ng-show='vm.updateSuccess' type='success' close='vm.closeUpdateSuccess()' dismiss-on-timeout='2000'>
Successfully updated!
</alert>
<h1>Test Text</h1>
<button ng-click='vm.submit()'>Submit</button>
</div>
</body>
</html>
The problem is you are not using the alert directive correctly. It is working as designed and you can see this by looking at the console in your browser. When the page is rendered, two seconds later your logging statement is executed. The alert directive doesn't know or care whether or not it is visible. Angular will execute the directive when it is added to the DOM. For ng-show as you are using, it is only ever added once. You could use ng-if to achieve the desired behavior or, as I say below, ng-repeat if you want the ability to display multiple alerts.
Look at our examples here and see how we're using an array to store them and the HTML code to display them via an ng-repeat.
your are using angular-ui but you are trying to execute native javascript function, try to use the angular in your js file.1 So you need to implement it with so that directive could call it,
<alert type="danger" close='closeUpdateSuccess()' ng-if="show"
dismiss-on-timeout="2000">Something happened.</alert>
and in controller:
$scope.show = true;
$scope.closeUpdateSuccess() = function(index) {
$scope.show = false;
};
I need to know when I can begin using my custom Polymer elements programmatically. The elements are still undefined even in my window.onload handler. Is there an established way of doing this correctly with Polymer 1.0?
-Edit-
I see there is a downvote, so let me clarify the issue. I have the following custom element definition:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="element-one">
<style>
:host { display: block; background-color: blue; }
</style>
<template>
<h1>Element One</h1>
<content></content>
</template>
</dom-module>
<script>
var ElementOne = Polymer({
is: "element-one"
});
</script>
I then import this in my index.html:
<link rel="import" href="elements/element-one/element-one.html">
And at the bottom of index.html, before the </body> tag, I try to instantiate a ElementOne element:
<script>
console.log(typeof ElementOne); // undefined
var el = new ElementOne(); // fails, obviously
// try on window load
window.onload = function () {
console.log(typeof ElementOne); // undefined
};
</script>
I should note that this issue occurs in the latest Firefox and IE 10/11, but not in Chrome.
use WebComponentsReady event:
window.addEventListener('WebComponentsReady', function(e) {
...
});
I'm building a website using angular for a tabbed table of links and I can't get the templated section to show up at all. Not sure where the issue lies, but I believe everything is set up correctly and the files are all on a hosted drive that I've used to properly test javascript plenty of times. Is there anything wrong with the angular or HTML? I've just included the pertinent bits.
HTML:
<html lang="en" ng-app="operations">
<head>
...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="base_styles.css" type="text/css">
<script type="text/javascript" language="javascript" src="Operations.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body ng-controller="OperationsController as ops">
<div id="header">
<h1>Operations</h1>
<category-tabs></category-tabs>
</body>
</html>
Angular JS:
(function() {
var operationsApp = angular.module('operations', []);
operationsApp.controller('OperationsController', function() {
var operations = this;
operations.categories = [];
});
OperationsController.directive("categoryTabs", function() {
return {
restrict: "E",
templateUrl: "category-tabs.html"
});
})();
Template HTML:
<section>
<ul class = "nav nav-pills">
<li ng-class = "{ active : tab.isSet(1) }">
<a href ng-click="tab.setTab(1)">Popular Tools</a>
</li>
...
</ul>
</section>
Unless you're doing something really clever that I haven't seen before, I think your problem lies in this line:
OperationsController.directive("categoryTabs", function() { });
You seem to be calling .directive on a Controller, which is odd. You are also missing a closing } on the directive definition object. Are you looking at the javascript console? Errors like this should show up.
.directive() is a method of an angular module, so you should use:
operationsApp.directive("categoryTabs", function() { });
P.S. you can make everything a bit neater an more readable if you chain everything off the initial .module(). This is how your code would look:
angular.module('operations', [])
.controller('OperationsController', function() {
var operations = this;
operations.categories = [];
})
.directive("categoryTabs", function() {
return {
restrict: "E",
templateUrl: "category-tabs.html"
}
});