Событие нажатия AngularJS не работает с кнопкой onsen ui - PullRequest
Новая
       15

Событие нажатия AngularJS не работает с кнопкой onsen ui

0 голосов
/ 09 апреля 2019

Извините за мое невежество, но я новичок здесь,

Событие 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>

1 Ответ

0 голосов
/ 09 апреля 2019

Я не вижу никаких проблем с вашим кодом, и кажется, что он работает нормально.Ниже приведен пример фрагмента, демонстрирующий, что событие нажатия запускается так, как должно.Единственная разница между вашим кодом и этим фрагментом состоит в том, что я подключил библиотеки, необходимые для его запуска.В контроллер / шаблон не было внесено никаких изменений.

Убедитесь, что в браузере установлена ​​последняя версия вашей страницы. 

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