Data binding angularjs with onsenui variable UNDEFINE - javascript

I am sorry i new in onsenui and angularjs, but i will ask simple question about data binding in onsenui and angularjs, when i used variable $scope.name with ng-model in onsen ui template have return UNDEFINE, here is my code
<!doctype html>
<html lang="en" ng-app="simpleKamus">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="lib/onsen/css/onsenui.css"/>
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css"/>
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/angular/angular-route.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script>
var nameApp=angular.module('simpleKamus',['onsen']);
nameApp.controller('KamusCtrl',['$scope','$http',function ($scope,$http){
$scope.tes=function(){
alert($scope.name);
};
}]);
</script>
</head>
<body ng-controller="KamusCtrl">
<ons-tabbar>
<ons-tab page="english.html" label="English - Indonesia" icon="ion-chatbox-working" active="true"></ons-tab>
<ons-tab page="indo.html" label="Indonesia - English" icon="ion-chatbox-working"></ons-tab>
</ons-tabbar>
<ons-template id="english.html">
<ons-toolbar>
<div class="center">ENGLISH - INDONESIA</div>
</ons-toolbar>
<input type="text" ng-model="name" class="text-input text-input--transparent" placeholder="name" style="width: 100%">
<button ng-click="tes()">tes</button>
</ons-page>
</ons-template>
</body>
</html>
when i click tes button, Why $scope.name is UNDEFINE? if i remove all onsen's tags, only tag HTML, variable $scope.name was define. i had tried the solution in link Two way binding, scope variable undefined, but cannot solve this problem, i am sorry my bad english? thanks you

You have forgot to open the tag <ons-page>. Your code doesn't work because the controller is not recognised after the ons-template, putting it in ons-page works. I fixed your problem modifying the code in this way
<!doctype html>
<html lang="en" ng-app="simpleKamus">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="lib/onsen/css/onsenui.css"/>
<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css"/>
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/angular/angular-route.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script>
var nameApp=angular.module('simpleKamus',['onsen']);
nameApp.controller('KamusCtrl',['$scope','$http',function ($scope,$http){
$scope.tes=function(){
alert($scope.name);
};
}]);
</script>
</head>
<body>
<ons-tabbar>
<ons-tab page="english.html" label="English - Indonesia" icon="ion-chatbox-working" active="true"></ons-tab>
<ons-tab page="indo.html" label="Indonesia - English" icon="ion-chatbox-working"></ons-tab>
</ons-tabbar>
<ons-template id="english.html">
<ons-page ng-controller="KamusCtrl">
<ons-toolbar>
<div class="center">ENGLISH - INDONESIA</div>
</ons-toolbar>
<input type="text" ng-model="name" class="text-input text-input--transparent" placeholder="name" style="width: 100%">
<button ng-click="tes()">tes</button>
</ons-page>
</ons-template>
</body>
</html>
p.s. i suggest you to let the index page with the standard template and create a english.html page where to put the content. Same for the controller.

In the first attempt, if you use ng-model = "$parent.name" would work well.

Related

AngularJS click event not working with onsen ui button

Sorry for my ignorance but I'm a newbie here,
The ng-click event on an ons-button is not firing,
I tried different solutions but no one does work for me
I'm a trying to create a simple page with just one tab that shows a button , for now , I'm just trying to make it trigger the expected event (an alert for exemple). Once resolved, I can go to implement a more advanced action ...
could it be a problem with the scopes ?
<html lang="en" ng-app="my-app">
<head>
<!-- here i added the needed css and js scripts -->
<script>
var module = angular.module("my-app", ["onsen"]);
module.controller("TabbarController", function($scope) {
$scope.updateTitle = function($event) {
$scope.title = angular.element($event.tabItem).attr("label");
};
});
module.controller("ListenButtonController", function($scope) {
$scope.onListenButtonClick = function() {
alert("lool");
};
});
</script>
</head>
<body>
<ons-page ng-controller="TabbarController">
<ons-toolbar>
<div class="center">{{ title }}</div>
</ons-toolbar>
<ons-tabbar swipeable position="auto" ons-prechange="updateTitle($event)">
<ons-tab
page="homeTemplate"
label="Home"
icon="ion-home, material:md-home"
active
>
</ons-tab>
</ons-tabbar>
</ons-page>
<template id="homeTemplate">
<ons-page id="Tab1" ng-controller="ListenButtonController">
<p style="text-align: center;">
Welcome Home ^_^
</p>
<ons-button modifier="large" ng-click="onListenButtonClick()"
>Click to Listen (not implemented yet), it just shows an alert!!</ons-button>
</ons-page>
</template>
</body>
</html>
I can't see any problem with your code and it seems to work just fine. Below is an example snippet demonstrating that click event is triggered as it should. The only difference between your code and this snippet is that I have connected the libraries that are necessary to run it. No changes to controller/template have been made.
Make sure that you are running the latest version of your page in your browser.
<html lang="en" ng-app="my-app">
<head>
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script src="https://unpkg.com/angularjs-onsenui#1.0.1/dist/angularjs-onsenui.min.js"></script>
<script>
var module = angular.module("my-app", ["onsen"]);
module.controller("TabbarController", function($scope) {
$scope.updateTitle = function($event) {
$scope.title = angular.element($event.tabItem).attr("label");
};
});
module.controller("ListenButtonController", function($scope) {
$scope.onListenButtonClick = function() {
alert("lool");
};
});
</script>
</head>
<body>
<ons-page ng-controller="TabbarController">
<ons-toolbar>
<div class="center">{{ title }}</div>
</ons-toolbar>
<ons-tabbar swipeable position="auto" ons-prechange="updateTitle($event)">
<ons-tab
page="homeTemplate"
label="Home"
icon="ion-home, material:md-home"
active
>
</ons-tab>
</ons-tabbar>
</ons-page>
<template id="homeTemplate">
<ons-page id="Tab1" ng-controller="ListenButtonController">
<p style="text-align: center;">
Welcome Home ^_^
</p>
<ons-button modifier="large" ng-click="onListenButtonClick()"
>Click to Listen (not implemented yet), it just shows an alert!!</ons-button>
</ons-page>
</template>
</body>
</html>

Templates in Ractive.js

I am new to Ractive.js and just playing around with it. I am trying to build a simple app, but strangely, it's not working on my pc and I am getting an error in console "Could not find template element with id #template", where #template refers to the id assigned to script tag. Nothing gets rendered on my browser. However, the same code is running fine in JSFiddle. Can someone explain what is happening here?
Here is the fiddle.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Weather Details</title>
<meta name="description" content="Get weather for your city">
<link href="https://fonts.googleapis.com/css?family=Arimo" rel="stylesheet">
<link rel="stylesheet" href="weather.css">
<script src='https://cdn.ractivejs.org/latest/ractive.js'></script>
<script src="weather.js"></script>
</head>
<body>
<div id="main" class="page-container">
<script id='template' type='text/ractive'>
<div class="weather-widget">
<div class="input-group">
<label>City Name</label>
<input type="text" class="form-control" placeholder="Enter City Name" />
</div>
<div class="input-group">
<label>Recent Searches</label>
<select>
<option>Select from recent searches</option>
</select>
</div>
<div class="weather-details">
<table>
<tbody>
<tr>
<th>Wind</th>
<td>{{country}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</script>
</div>
</body>
</html>
Code in weather.js:
var ractive = new Ractive({
el: '#main',
template: '#template',
data: {
country: 'London'
}
});
At the time weather.js executes, the element hasn't yet been created. You could either move the <script src='weather.js'></script> tag to the bottom of the page (inside <body>, after the topmost <div> containing the template element the script refers to), or add a defer attribute: <script defer src='weather.js'></script>.

AngularJS isn`t working

after watching this presentation (https://www.youtube.com/watch?v=ImR0zo1tA_I) I wanted to try Angular JS. I copied the code, exactly what was on the screen, but i doesn't work. I tried it in my browser, in my page (http://thecodemaker.com.pl), I was doing research about AngularJS but it still doesn`t want to work.
Code :
<!DOCTYPE html>
<html ng-app="basicApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
</head>
<body ng-controller="TodoController">
<form>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title"><b>ToDo List</b></h1>
</div>
<ul class="list-group">
<li class="list-group-item" ng-repeat = "todo in todos">
<div class="checkbox">
<label>
<input type="checkbox"> {{todo}}
</label>
<button type="button" class="close">×</button>
</div>
</li>
</ul>
</div>
<div class="form-group has-feedback">
<label class="control-label invisible">Enter Task</label>
<input type="text" class="form-control text-primary"></input>
<button type="button" class="close form-control-feedback text-muted">±</button>
</div>
<div class="alert alert-info">Enter new task to get started</div>
<div class="alert alert-danger">Maximum number of tasks allowed : 5</div>
</div>
</form>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.11.2.js"></script>
<script>
angular.module("basicApp", [])
.controller("TodoController", ["$scope", function($scope) {
$scope.todos =['Buil an atomic bomb','Sell it on ebay']
}
</script>
</body>
</html>
Any ideas what is wrong ?
There seems to be a lot wrong with your snippet. For one, your submit/add button is not bound to an event listener or anything so it's not doing anything that you'd want (like adding an item to the property on your controller's $scope).
Check out the Todo example on Angular's official website, it's more up to date.
https://angularjs.org/ (scroll down).
Here's the video for it: https://www.youtube.com/watch?v=WuiHuZq_cg4
There is an error : Bootstrap's JavaScript requires jQuery, which means you need to add jQuery library to your project, required by bootstrap.js
Starting with Angular 1.3.x, you can no longer declare a controller as a generic global function on window. Controllers must now use the more current form of component declaration.
<script>
angular.module("basicApp", [])
.controller("TodoController", ["$scope", function($scope) {
$scope.todos =['Buil an atomic bomb','Sell it on ebay']
}
</script>
In the HTML, change ng-app="" to ng-app="basicApp.

Onsen UI navigator

I'm looking for learn OnsenUi to replace Jquery in my phonegap project.
I want to make a login page and after switch to a main page.
To do that there is my html code :
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>My App</title>
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="styles/topcoat-mobile-onsen-blue.css">
<link rel="stylesheet" href="styles/app.css"/>
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-controller="MyController as ctrl">
<ons-navigator title="Navigator" var="myApp.myNavigator">
<ons-page id="connexion.html">
<ons-toolbar>
<div class="center">Page 1</div>
</ons-toolbar>
<ons-row style="margin-top: 50px;">
<ons-col align="left">
<div>
<section style="padding: 8px">
<p> Identifiant </p>
<input class="text-input" id="id-input" ng-model="ctrl.id" style="display: block; width: 100%">
</section>
<section style="padding: 8px">
<p> Password </p>
<input type="password" class="text-input" id="password-input" ng-model="ctrl.password" style="display: block; width: 100%">
</section>
<section>
Resté connecté
<ons-checkbox ng-model="ctrl.answer" ng-true-value="true" ng-false-value="false" ng-init="ctrl.answer='true'">
</ons-checkbox>
</section>
<section style="padding: 8px">
<ons-button modifier="large" style="display: block; width: 100%" ng-click="ctrl.connexion()">Connexion</ons-button>
</section>
</div>
</ons-col>
</ons-row>
</hr>
identifiant = {{ctrl.id}}
</hr>
password = {{ctrl.password}}
</ons-page>
</ons-navigator>
<ons-template id="app.html">
<ons-page>
<ons-toolbar>
<div class="center">Page 2</div>
</ons-toolbar>
<h1>APP</h1>
</ons-page>
</ons-template>
</body>
</html>
`
And my js :
(function(){
var mbdGlobal = new Object();
var app = angular.module('myApp', ['onsen.directives']);
app.controller('MyController', function($scope, $window){
this.id = "";
this.password = "";
this.connexion = function(){
mbdGlobal.id = this.id;
mbdGlobal.password = this.password;
mbdGlobal.stayConnected = JSON.parse(this.answer);
alert(JSON.stringify(mbdGlobal));
//myNavigator.pushPage("app.html", { animation: "slide" });
};
});
})();
But when i start the application i only see the second page.
Plz can you help me because the web site of Onsen don't give real exemple.
Thanks.
You can add the default loading page by adding the attribute page inside the navigator. Assuming that your login page name is login.html, you should write something like this
<ons-navigator var="myNavigator" page="login.html"></ons-navigator>
Don't put the login in the index.html, hope it helps.
If your project use slide menu template you can easily do it by setting the main page, refer the following code =)
<ons-sliding-menu menu-page="menu.html" main-page="login.html" side="left"
var="menu" type="reveal" max-slide-distance="90%" swipeable>
</ons-sliding-menu>

Apply in progress in Angular.JS

I have angularjs application and <span> in it. I try to hide it with ng-hide directive, but:
<span ng-hide="hideSpan">
And
// controller code here
....
$scope.hideSpan = true;
....
Doesn't work, it's ignoring. And if i make:
// controller code here
....
$scope.$apply(function(){$scope.hideSpan = true});
....
I get error: $apply already in progress.
How can i correctly use ng-hide/ng-show in this way?
Thank you.
You should be able to directly control the hide/show functions from your controller just as you show. The following is working example using a button to trigger toggling of hide show.
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myapp" ng-controller="mycontroller">
<span ng-hide="hideSpan">Some Content to hide</span>
<button ng-click="toggleHide()"/>Toggle Hide</button>
</body>
</html>
And the script.
angular.module('myapp', []).controller('mycontroller', function($scope){
$scope.hideSpan = true;
$scope.toggleHide = function(){
if($scope.hideSpan === true){
$scope.hideSpan = false;
}
else{
$scope.hideSpan = true;
}
}
});
I've created a simple plunker to show this in action at http://plnkr.co/edit/50SYs0Nys7TWmJS2hUBt?p=preview.
As far as why the $apply is causing an error, this is to be expected as direct scope (provided by the $scopeProvider) variable operations are already watching for change and wrapped into a default apply of sorts in core angular so any change will be automatically applied to the other bindings of that variable.
you can just change the hideSpan value in ng-click, save few lines. cheers
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myapp" ng-controller="mycontroller">
<span ng-hide="hideSpan">Some Content to hide</span>
<button ng-click="hideSpan=!hideSpan"/>Toggle Hide</button>
</body>

Categories