In below ExamppleController function a value is entered into message variable local storage. For the first time value is getting stored but when entered again value is not getting stored. When browser cache is cleared then value is stored again and second time no value is getting stored.
Mystorage.html
<html>
<head>
<script src="angular.min.js"></script>
<script src="ngStorage.min.js"></script>
<script>
var example = angular.module("example", ["ngStorage"]);
example.controller("ExampleController", function($scope,$rootScope,$window,$localStorage,$location) {
$scope.save = function() {
$rootScope.newq=$scope.name;
$scope.$apply();
**$localStorage.message = $scope.name;**
console.debug($localStorage.message);
$window.location.href = 'nextstorage.html';
}
});
</script>
</head>
<body ng-app="example">
<div ng-controller="ExampleController">
<input type="text" ng-model="name"/>
<button ng-click="save()">Save</button>
<br>
{{data}}
</div>
</body>
</html>
NextStorage.html
<html>
<head>
<script src="angular.min.js"></script>
<script src="ngStorage.min.js"></script>
<script>
var example = angular.module("example", ["ngStorage"]);
example.controller("ExampleController", function($scope,$window,$localStorage,$location) {
$scope.data1 = $localStorage.message;
});
</script>
</head>
<body ng-app="example">
<div ng-controller="ExampleController">
<span>{{data1}}</span>
</div>
</body>
</html>
You should really be doing things the AngularJS way. I think this is where the disconnect happens.
See the following code:
<html>
<head>
<script src="angular.min.js"></script>
<script src="ngStorage.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script>
var example = angular.module("example", ["ngStorage", "ui.router"]);
example.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('1', {
url: '/1',
templateUrl: 'templates/1.html',
controller: 'FirstController'
})
.state('2', {
url: '/2',
templateUrl: 'templates/2.html',
controller: 'SecondController'
});
$urlRouterProvider.otherwise('/1');
});
example.controller("FirstController", function($scope,$localStorage,$location) {
$scope.save = function() {
$localStorage.message = $scope.name;
$location.path("/2");
}
});
example.controller("SecondController", function($scope,$localStorage,$location) {
$scope.data1 = $localStorage.message;
});
</script>
</head>
<body ng-app="example">
<div ui-view></div>
<script id="templates/1.html" type="text/ng-template">
<div>
<input type="text" ng-model="name"/>
<button ng-click="save()">Save</button>
<br>
</div>
</script>
<script id="templates/2.html" type="text/ng-template">
<div>
<span>{{data1}}</span>
</div>
</script>
</body>
</html>
You'll notice I'm using routes and navigating between them using the $location provider. The $localStorage works fine when doing it this way.
Read up on the ui-router or ngRoute.
Regards,
Related
I am following the example from the documentation on https://developers.google.com/vr/concepts/vrview-web. Here is my code:
<head>
<script src="vrview.min.js"></script>
<script>
window.addEventListener('load', onVrViewLoad)
function onVrViewLoad() {
var vrView = new VRView.Player('#vrview', {
video: 'http://localhost/360/spa360injected.mp4',
is_stereo: true,
width:'640',
height:'480'
});
}
</script>
</head>
<body>
<div id="vrview"></div>
</body>
</html>
I get the error
vrview.min.js:1 GET http://localhost/index.html?video=http://localhost/360/spa360injected.mp4&is_stereo=true& 404 (Not Found)
This should be a plug and play example. What am I doing wrong?
I have an array of objects which has a field to indicate whether its properties should be displayed:
[{
state: true
},
{
state: false
},
{
state: false
}]
And I use Polymer iron-collapse's "opened" field to bind with state in order to collapse it.
This works in Polymer 0.5, but it fails in 1.0. Also, it works if I directly pass a boolean property - just not with an object.
When I say "doesn't work", I mean that the collapsing doesn't happen.
What did I fail to migrate properly? Or is this a bug in iron-collapse?
This Works:
(Using an Array of Boolean)
demo.html:
<html>
<head>
<link rel="import" href="iron-collapse-demo.html">
</head>
<body>
<iron-collapse-demo states='[ true, false, false ]'></iron-collapse-demo>
</body>
</html>
iron-collapse-demo.html:
<html>
<head>
<script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../bower_components/iron-collapse/iron-collapse.html">
</head>
<body>
<dom-module id="iron-collapse-demo">
<style>
</style>
<template>
<template is="dom-repeat" items="{{states}}">
<span on-tap="collapseToggle"><+></span>
<iron-collapse opened="{{item}}">
<div>Hello collapse!</div>
</iron-collapse>
</template>
</template>
</dom-module>
</body>
<script src="iron-collapse-demo.html.0.js"></script>
</html>
iron-collapse-demo.html.0.js:
Polymer({
'is': 'iron-collapse-demo',
'properties': {
'states': Array
},
'ready': function() {
},
'collapseToggle': function(event, detail, sender) {
event.model.item = !event.model.item;
},
});
This doesn't work:
(Using an Array of Object with a Boolean property)
demo.html
<html>
<head>
<link rel="import" href="iron-collapse-demo.html">
</head>
<body>
<iron-collapse-demo nums='[ {"state": true}, {"state": false}, {"state": false} ]'></iron-collapse-demo>
</body>
</html>
iron-collapse-demo.html:
<html>
<head>
<script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../bower_components/iron-collapse/iron-collapse.html">
</head>
<body>
<dom-module id="iron-collapse-demo">
<style>
</style>
<template>
<template is="dom-repeat" items="{{nums}}">
<span on-tap="collapseToggle"><+></span>
<iron-collapse opened="{{item.state}}">
<div>Hello collapse!</div>
</iron-collapse>
</template>
</template>
</dom-module>
</body>
<script src="iron-collapse-demo.html.0.js"></script>
</html>
iron-collapse-demo.html.0.js:
Polymer({
'is': 'iron-collapse-demo',
'properties': {
'nums': Array
},
'ready': function() {
},
'collapseToggle': function(event, detail, sender) {
var num = event.model.item;
num.state = !num.state;
},
});
I found a hack/workaround, though I'm not convinced this should be the only way that works..
I wrapped the span and iron-collapse inside a div so that I can use a querySelector and toggle() the collapse.
iron-collapse-demo.html:
<template is="dom-repeat" items="{{nums}}">
<div>
<span on-tap="collapseToggle"><+></span>
<iron-collapse opened="{{item.state}}">
<div>Hello collapse!</div>
</iron-collapse>
</div>
</template>
iron-collapse-demo.html.0.js:
new collapseToggle:
'collapseToggle': function(event, detail, sender) {
// event.model.item.state = !event.model.item.state;
event.currentTarget.parentElement.querySelector('iron-collapse').toggle();
}
Try:
<iron-collapse horizontal opened$="[[item.state]]">
...
</iron-collapse>
HTML booleans are true when the attribute is present, not if the value of the attribute is true. Binding the attribute instead of value means Polymer outputs the attribute name when true but nothing for false.
Upon submission of a form, I want to push that data to my Firebase db and so I'm creating a function to do so (addMeeting). However, upon pressing the button to submit I get the error:
TypeError: undefined is not a function
at l.$scope.addMeeting (http://localhost:8000/js/controllers/meetings.js:10:12)
meetings.js:10:12 is right where my $push is if you'll look at my code below.
My HTML:
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Data</title>
<meta name="viewport" content="width=device-width, userscalable=no">
<link rel="stylesheet" href="css/style.css">
<!-- AngularJS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="js/lib/angular/angular-route.min.js"></script>
<script src="js/lib/angular/angular-animate.min.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/registration.js"></script>
<script src="js/controllers/meetings.js"></script>
</head>
<body>
<header>
<nav class="cf" ng-include="'views/nav.html'"></nav>
</header>
<div class="page">
<main class="cf" ng-view></main>
</div>
</body>
</html>
My apps.js:
var myApp = angular.module('myApp',
['ngRoute', 'firebase', 'appControllers']);
var appControllers = angular.module('appControllers', ['firebase']);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/login', {
controller: 'RegistrationController',
templateUrl: 'views/login.html'
}).
when('/register', {
controller: 'RegistrationController',
templateUrl: 'views/register.html'
}).
when('/meetings', {
controller: 'MeetingsController',
templateUrl: 'views/meetings.html'
}).
otherwise({
redirectTo: '/login'
});
}])
meetings.js -the Controller containing the addMeeting function that is failing:
myApp.controller('MeetingsController',
function($scope, $firebaseObject) {
var ref = new Firebase('https://angulardataldc.firebaseio.com/meetings');
var meetings = $firebaseObject(ref);
$scope.meetings = meetings;
$scope.addMeeting = function() {
meetings.$push({
name: $scope.meetingname,
date: Firebase.ServerValue.TIMESTAMP
})
}
}); //MeetingsController
The view that is calling that function upon submission of a form:
<section class="meetings cf">
<h1>Add Meetings</h1>
<form class="formgroup addmeeting cf"
name="myform"
ng-submit="addMeeting()"
novalidate>
<div class="inputwrapper">
<input type="text" name="meetingname" placeholder="Meeting Name"
ng-model="meetingname" ng-required="true">
</div>
<button type="submit" class="btn"
ng-disabled="myform.$invalid">+</button>
</form>
<h2>Your Meetings</h2>
<div class="meeting" ng-repeat="meeting in meetings">
<p>{{meeting.name}}</p>
</div>
</section>
**Edit: ** It has something to do with the .push() method itself. I see that in the latest version of angularfire/firebase it should be .push, instead of .$push, ad have changed that but it does not solve my problem. I reverted AngularFire and Firebase to versions 0.8.2 and 1.0.21 respectively, re-introduced the .asObject() and $push, and everything works fine. I don't understand why .push() is failing with all the latest (Firebase 2.2.2, AngularFire 1.0).
Firebase's AngularFire library has two primary types: $firebaseObject and $firebaseArray (instantiated through $asObject and $asArray respectively in pre-1.0 versions of AngularFire).
You're using both the wrong type and the wrong method. To quote AngularFire's documentation on its array type:
Synchronized arrays should be used for any list of objects that will be sorted, iterated, and which have unique IDs. The synchronized array assumes that items are added using $add(), and that they will therefore be keyed using Firebase push IDs.
So:
var ref = new Firebase('https://angulardataldc.firebaseio.com/meetings');
var meetings = $firebaseArray(ref);
$scope.meetings = meetings;
$scope.addMeeting = function() {
meetings.$add({
name: $scope.meetingname,
date: Firebase.ServerValue.TIMESTAMP
})
}
You made a typo, it should be .push instead of $push
CODE
$scope.addMeeting = function() {
meetings.push({
name: $scope.meetingname,
date: Firebase.ServerValue.TIMESTAMP
})
}
Reference
I've just started out using backbone. I want to apply a view to a button, but when I open my file in the browser there is nothing there.
Why isn't the button being rendered?
HTML:
<!-- Scripts -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script type="text/javascript" src="views/BaseButtonView.js"></script>
</head>
<body>
<script type="text/template" id="button-test">
<div id="test-buttons">
<button class="cta-ajax">
<p>send message</p>
<div class="spinner-container"></div>
</button>
</div>
</script>
</body>
</html>
View:
$(document).ready(function(){
var ButtonView = Backbone.View.extend({
el: $(".cta-ajax"),
template: _.template($("#button-test").html()),
initialize: function(){
console.log("Started!");
},
render: function() {
this.$el.html(this.template());
console.log("rendered");
return this;
}
});
var TView = new ButtonView();
});
You have two issues with your code. Here is a working jsfiddle: http://jsfiddle.net/cj4zkyow/1/
Issue 1:
Aside from implementing the initialize function, you also need to call render within initialize. Otherwise you have to call render manually.
Issue 2:
Second issue is that you set the el attribute of your view to .cta-ajax, but the element does not exist. It is part of your template. The el attribute is the element that your view gets appended to. So you need to use something that exists in the DOM.
HTML:
// Need a element to append view to.
<div id="test"></div>
<script type="text/template" id="button-test">
<div id="test-buttons">
<button class="cta-ajax">
<p>send message</p>
<div class="spinner-container"></div>
</button>
</div>
</script>
Javascript:
$(document).ready(function(){
var ButtonView = Backbone.View.extend({
// If you specify, el, it should be an element in the DOM, not in your template.
el: $("#test"),
template: _.template($("#button-test").html()),
initialize: function(){
// Need to call render in initialize function to render view.
this.render();
},
render: function() {
this.$el.html(this.template());
return this;
}
});
var TView = new ButtonView();
});
I'm trying to parse a city and country from an "Enter your location" textbox. Google Places Autocomplete is good at retrieving locations, but not every result has a country and a city (e.g. typing in "Russia" will show "Russia" as the top result, which lists no city). Whatever location the user type is saved, but the city and country portions need to be stored separately.
Is there a way to force every autocomplete result to contain both a city and a country, BUT not limit it to only those two? (e.g. typing in "Russia" would show "Moscow, Russia" or "115 X Street, Moscow, Russia", etc.)
My solution
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Place Autocomplete</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.2.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&language=en" type="text/javascript"></script>
<script type="text/javascript">
var autocomplete;
var place;
function initialize()
{
var options = {types: ['(cities)']};
var input = document.getElementById('searchTextField');
autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInPlace();
});
}
function fillInPlace() {
place = autocomplete.getPlace();
var $address = $(place['adr_address']);
$('#resultTextField').val($address.text());
}
$(document).on('ready', function(){
$("#searchTextField").on('focusout', function(e){
setTimeout(function() {
$("#searchTextField").val('');
}, 1000);
});
})
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<form class='form'>
<div class="form-group">
<div class="col-xs-12">
<label for="searchTextField">City</label>
</div>
<div class="col-xs-12">
<input id="searchTextField" type="text" placeholder="Search" autocomplete="on" class='form-control pull-left' style='width:40%; margin-right:3px;'>
<input id="resultTextField" type="text" placeholder="" autocomplete="on" class='form-control pull-left' disabled='disabled' style='width:55%'>
</div>
</div>
</form>
</body>
</html>