AngularJS点击事件无法使用onsen ui按钮
[英]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, ons-button上的ng-click事件未触发，
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>
1 个解决方案
解决方案1
0 已采纳 2019-04-09 14:25:55
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. 下面是一个示例代码段，演示了如何触发click事件。 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.