AngularJS 单击事件不适用于温泉 ui 按钮

Question

抱歉我的无知，但我是这里的新手，

ons 按钮上的 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>

Answer 1

我看不出您的代码有任何问题，它似乎工作正常。下面是一个示例片段，演示了点击事件是如何触发的。您的代码与此代码段之间的唯一区别是我已经连接了运行它所必需的库。未对 controller/template 进行任何更改。

确保您运行浏览器中的页面是最新版本。

<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>

AngularJS 单击事件不适用于温泉 ui 按钮

AngularJS click event not working with onsen ui button

javascript

angularjs

onsen-ui