In this jsbin how can I update the element's content and add a class?
It seems that this.$.content.innerHTML = "Changed?" and this.classList.add('new') won't work.
The code in the jsbin is as follows:
<!DOCTYPE html>
<html>
<head>
<base href="http://polygit.org/components/">
<script src="webcomponentsjs/webcomponents.min.js"></script>
<link href="polymer/polymer.html" rel="import">
</head>
<body>
<my-element>Some text</my-element>
<dom-module id="my-element">
<template>
<style>
:host {
background: lightgrey;
}
.new {
background: blue;
}
</style>
<content>
</content>
<button on-tap="make">Make blue</button>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: 'my-element',
make: function() {
this.$.content.innerHTML = "Changed?";
this.classList.add('new');
}
})
})
</script>
</dom-module>
</body>
</html>
This did the trick:
:host.new {
background: blue;
}
...
make: function() {
this.classList.add("new");
Polymer.dom(this).innerHTML = "changed?";
}
Related
This is derived from my question here: Changing style on <body> element where the suggestion was to style a top level DIV. Having tried that I find that I get a different output using React compared to direct HTML. I am at a loss to understand why.
Consider a very simple react app consisting of a basic index.html file:
<!DOCTYPE HTML>
<html>
<head>
<style>
html { min-height: 100%; }
body { height: 100%; background-color: blue; margin: 0; }
</style>
</head>
<body>
<div id='root'></div>
<script src="https://fb . me / react-15.0.1.js"></script>
<script src="https://fb . me / react-dom-15.0.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="main.js" type="text/babel"></script>
</body>
</html>
and a corresponding main.js file
var TestDiv = React.createClass({
render: function () {
const style = {
divStyle: {
height: "100%",
background: "red"
}
}
return (
<div style={style.divStyle}>
<h1>Hello World</h1>
</div>
)
}
});
ReactDOM.render(<TestDiv/>, document.getElementById('root'));
Rendering this produces a blue screen with a red bar at the top with the text on. With the DIV set to a height of 100% I had expected the red background to fill the viewport.
Now, take the output from that React app (as given by Chrome Inspector) and create a simple html file from it.
<html>
<head>
<style>
html { min-height: 100%; }
body { height: 100%; background-color: blue; margin: 0; }
</style>
</head>
<body>
<div id="root">
<div data-reactroot="" style="height: 100%; background: red;">
<h1>Hello World</h1>
</div>
</div>
<script src="https://fb . me/react-15.0.1.js"></script>
<script src="https://fb . me/react-dom-15.0.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="main.js" type="text/babel"></script>
</body>
</html>
The code is essentially the same but this renders with the whole viewport in red and no blue at all.
Why?
I use the ng-class to add and remove the class by clicking the ` Button,' is not does not work? I use the Angular1.
What is the reason?
<html lang="en" ng-app="xxx">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 500px;
height: 500px;
background-color: black;
}
div.red {
background-color: red;
}
button {
width: 200px;
height: 50px;
background-color: gold;
}
</style>
</head>
<body ng-controller="ooo">
<script src="angular.js"></script>
<div ng-class="{red:isRed}" >xxxx</div>
<button ng-click="changColorIsRed()">O</button>
</body>
<script>
var app = angular.module('xxx',[]);
app.controller('ooo',['$scope',function ($scope) {
$scope.isRed = false;
$scope.changeColor = function () {
$scope.isRed = !$scope.isRed;
}
}]);
</script>
</html>
Is there another way to realize it?
You have a mistake in your code.
You define function changeColor but you use changColorIsRed in your ng-click attribute.
If you correct this to ng-click="changeColor()", your code will work.
Change
<button ng-click="changColorIsRed()">O</button>
To
<button ng-click="changColor()">O</button>
You have more than one mistake in your code:
Other than below change:
<button ng-click="changColorIsRed()">O</button>
To
<button ng-click="changColor()">O</button>
You can not use Angular's directives and then load the angular.js file.
You must to set the below code:
<script src="angular.js"></script>
on top of ng-app.
Regarding Neon Animations ( https://elements.polymer-project.org/guides/using-neon-animations )
Is it possible to specify the same animation to run simultaneously on multiple nodes?
For example:
animationConfig: {
value: function() {
return {
'entry': {
name: 'bounce-in-animation',
node: Polymer.dom(this.root).querySelectorAll("div"), // here
timing: {duration: 1000}
},
'exit': {
name: 'fade-out-animation',
node: this
}
}
}
}
In the above code sample (specifically in "//here"), I’m attempting to run ‘bounce-in-animation’ on multiple div instances instead of just one.
Is this presently possible?
I tried the code above, and got a 'Cannot execute' type of error. So I'm really asking if there is a way to achieve what the code above intends. Thanks
You have to import cascaded-animation and in your entry definition use:
{
name: 'cascaded-animation',
animation: 'bounce-in-animation',
nodes: Polymer.dom(this.root).querySelectorAll("div"),
nodeDelay: 0, // You can use this to delay animation between each node
timing: {duration: 1000}
}
Here you have a quick demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Polymer cascaded animation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/webcomponents.min.js"></script>
<link href="https://polygit.org/components/polymer/polymer.html" rel="import">
<link href="https://polygit.org/components/neon-animation/neon-animation-runner-behavior.html" rel="import">
<link href="https://polygit.org/components/neon-animation/animations/fade-in-animation.html" rel="import">
<link href="https://polygit.org/components/neon-animation/animations/cascaded-animation.html" rel="import">
</head>
<body>
<dom-module id="x-foo">
<template>
<div>
Hi! I'm a div!
</div>
<div>
Hello! I'm another div!
</div>
<div>
And I'm the last div!
</div>
<button on-tap="runAnimation">Click me!</button>
</template>
<script>
HTMLImports.whenReady(function () {
Polymer({
is: 'x-foo',
behaviors: [
Polymer.NeonAnimationRunnerBehavior
],
properties: {
animationConfig: {
value: function() { return {
'entry': {
name: 'cascaded-animation',
animation: 'fade-in-animation',
nodes: Polymer.dom(this.root).querySelectorAll("div"),
nodeDelay: 0, // You can use this to delay animation between each node
timing: {duration: 1000}
}
} }
}
},
runAnimation: function() {
this.playAnimation('entry')
}
});
});
</script>
</dom-module>
<x-foo></x-foo>
</body>
</html>
EDIT: If you are confused about imports - import from bower_components, I had to import from those sources to make the demo work.
EDIT2: After reading your comment I have another idea: you can tell Polymer that every time the elements is initialized you want it to check all of the divs in it and register animation for this one. I'm not best at describing but maybe the demo will help you understand it better:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Polymer cascaded animation</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/webcomponents.min.js"></script>
<link href="https://polygit.org/components/polymer/polymer.html" rel="import">
<link href="https://polygit.org/components/neon-animation/neon-animation-runner-behavior.html" rel="import">
<link href="https://polygit.org/components/neon-animation/animations/fade-in-animation.html" rel="import">
<link href="https://polygit.org/components/neon-animation/animations/cascaded-animation.html" rel="import">
</head>
<body>
<dom-module id="x-foo">
<template>
<div>
Hi! I'm a div!
</div>
<div>
Hello! I'm another div!
</div>
<div>
And I'm the last div!
</div>
<button on-tap="runAnimation">Click me!</button>
</template>
<script>
HTMLImports.whenReady(function () {
Polymer({
is: 'x-foo',
behaviors: [
Polymer.NeonAnimationRunnerBehavior
],
properties: {
animationConfig: {
value: function() { return {
'entry': {
// Leave empty
}
} }
}
},
ready: function() {
var divsNL = Polymer.dom(this.root).querySelectorAll('div');
var divs = Array.prototype.slice.call(divsNL);
var output = [];
divs.forEach(function(item) {
output.push({
name: 'fade-in-animation',
node: item,
timing: { duration: 1000 }
});
});
this.set('animationConfig.entry', output);
},
runAnimation: function() {
this.playAnimation('entry')
}
});
});
</script>
</dom-module>
<x-foo></x-foo>
</body>
</html>
I'm trying to use Yandex Maps with this AngularJS module.
Here they have demonstrations, and here's my code:
index.html
<!DOCTYPE html>
<html lang="ru" xmlns:vml="urn:schemas-microsoft-com:vml" ng-app="myApp" ng-controller="myController">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1" />
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="style.css">
<script src="angular.min.js"></script>
<script src="ya-map-2.1.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<div id="map" class="w3-col s10 w3-dark w3-border">
<!--
<ya-map ya-zoom="8" ya-center="[37.64,55.76]" style="width:400px;height:500px;"></ya-map>
-->
</div>
</body>
</html>
script.js
console.log("script starts");
var myApp = angular
.module('myApp', ['yaMap'])
.controller("myController", function ($scope) {
console.log("In the controller");
var _map;
$scope.afterMapInit = function (map) {
_map = map;
};
$scope.del = function () {
_map.destroy();
};
console.log("After $scope ops");
$scope.initialize = function () {
var mapOptions = {
center: [50.5, 30.5],
zoom: 8
};
ymaps.ready(function () {
$scope.map = new ymaps.Map("map", mapOptions);
})
}
});
style.css
body {
background-color: #fff;
margin: 40px;
}
#body {
margin: 0 15px 0 15px;
}
#frmMain {
width: 100%;
height: 100%;
}
Please, if you know why I can't load the map and what's wrong with that code, (I suppose it's all wrong though), tell me about it!
I'm total novice in AngularJS and Yandex Maps, so, it may appear a silly question for you, but I cannot find anything useful on the Internet.
Promblem here in style for non-standard tag ya-map. By default browser set it display property to "inline", so without text element collapse to width:0, height:0.
Also, you not use any functions declared in controller.
You can see samples in Demo Page
var myApp = angular
.module('myApp', ['yaMap'])
.controller("myController", function($scope) {
var _map;
$scope.afterMapInit = function(map) {
_map = map;
};
$scope.del = function() {
_map.destroy();
};
});
ya-map {
display: block;
width: 400px;
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//rawgit.com/tulov/angular-yandex-map/master/ya-map-2.1.min.js"></script>
<div id="map" class="w3-col s10 w3-dark w3-border" ng-app="myApp" ng-controller="myController">
<ya-map ya-zoom="8" ya-center="[37.64,55.76]" ya-after-init="afterMapInit($target)"></ya-map>
<button ng-click="del()">Удалить</button>
</div>
I'm trying to add a class to the parent of an input when it gets focus. I can get the parent, but I can't seem to set the classname. Here's what I tried in this plunkr:
http://plnkr.co/edit/eEfSeDb7i3uujjBZt21z?p=preview
<!DOCTYPE HTML>
<html id="ng-app" ng-app="app"> <!-- id="ng-app" IE<8 -->
<head>
<link rel="stylesheet" href="http://nervgh.github.io/css/animate.min.css" />
<style>
.highlight {
border: 2px solid red;
}
.blue-border
{
border:2px solid blue;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script>
angular.module( 'app', [])
.run( function( $rootScope, $timeout ) {
$rootScope.focusInput= function($event )
{
angular.element($event.target).parent().className += " " + 'highlight';
console.log( angular.element($event.target).parent() );
};
$rootScope.blurInput= function($event )
{
angular.element($event.target).parent().className.replace(' highlight', '');
};
});
</script>
</head>
<body>
<div class="blue-border">
<input ng-focus="focusInput($event)" ng-blur="blurInput($event)" value="Lactobacillus acidophilus"/>
</div>
</body>
</html>
Notice how it logs the parent successfully. However, the border does not turn red! Is there some other more "Angulary" way of doing this?
Angular's JQLite provides the 'addClass' and 'removeClass' functions for this:
angular.element($event.target).parent().addClass('highlight');
See the documentation here: https://docs.angularjs.org/api/ng/function/angular.element