AngularJS点击事件无法使用onsen ui按钮

问题描述 投票:0回答:1

抱歉我的无知,但我是新手,

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>
javascript angularjs onsen-ui
1个回答
0
投票

我看不到你的代码有任何问题,它似乎工作得很好。下面是一个示例代码段,演示了如何触发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>
© www.soinside.com 2019 - 2024. All rights reserved.