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>
Related
I am using a bootstrap tab pane using a angular.
I want to find that which tab is clicked.
Here is a plunker link of my example.click here.
This is the code
angular.module('plunker', ['ui.bootstrap']);
var TabsDemoCtrl = function ($scope) {
};
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="TabsDemoCtrl">
<tabs>
<pane heading="Information">Information Tab</pane>
<pane heading="activity">activity Tab</pane>
<pane heading="History">History Tab</pane>
</tabs>
<hr>
</div>
</body>
</html>
Note: this code is not working in snippet.
I want to find a click event of all the tabs, without using ng-clickevent because there is already a click event ng-click="select(pane)".
I am trying to trigger an event from an Ember.js controller. I throws an error saying "ember.min.js:3 Uncaught Error: Nothing handled the action 'clicked'. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble.". Also I am not clear on how the event system works on itself for the targeted action. C an someone help me with this. Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Ember.js Application example</title>
<!-- CDN's -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
<script src="http://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/release/ember.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.4.3/ember.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" id="github-app">
</div>
<script type="text/x-handlebars" data-template-name="application">
<div class="row">
<div class="col-md-12">
<h1>Hello from Ember!</h1>
{{outlet}}
</div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="index">
<p>This is a github explorer for all the users.</p>
<ul>{{#each dev in controller}}
<li>{{dev}}</li>
{{/each}}
</ul>
<p>
<button class="btn btn-success" {{action "clicked"}}>Click Me</button>
</p>
<p>{{renderedOn}}</p>
</script>
<script type="text/javascript">
App = Ember.Application.create({
rootElement:"#github-app"
});
App.IndexRoute=Ember.Route.extend({
model:function(){
return [
"Sam",
"Sandy",
"Samudh"
];
}
});
App.IndexController = Ember.ArrayController.extend({
renderedOn : function(){
return new Date();
}.property(),
actions : {
clickMe(){
alert("I been clicked");
}
}
});
</script>
</body>
</html>
Also available at http://jsbin.com/cuxajiyuqa/edit?html,output
You don't have an action with the name 'clicked', and you tell your code to look for an action 'clicked' on clicking the button. Change
{{action "clicked"}}
into
{{action "clickMe"}}
or change the
clickMe(){
action into
clicked(){
and everything should be fine.
Check https://guides.emberjs.com/v2.4.0/templates/actions/ for the documentation on actions
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.
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.
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>