抱歉我的无知,但我是新手,
ons-button上的ng-click事件未触发,
我尝试了不同的解决方案,但没有人能为我工作
我试图用一个显示按钮的标签来创建一个简单的页面,现在,我只是想让它触发预期的事件(例如警告)。一旦解决,我可以去实施更高级的行动......
这可能是范围的问题吗?
<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>
我看不到你的代码有任何问题,它似乎工作得很好。下面是一个示例代码段,演示了如何触发click事件。您的代码和此代码段之间的唯一区别是我已连接运行它所必需的库。未对控制器/模板进行任何更改。
确保您在浏览器中运行最新版本的页面。
<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/[email protected]/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>