Событие щелчка AngularJS не работает с кнопкой onsen ui

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

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

Пожалуйста, исправьте тег вопроса... его формулировка или грамматика кажутся неправильными. Удалите «заявление новичка».., вы в настоящее время помечены как «новый участник».. и многое объясняет. Также проверьте другие вопросы на SO по этой теме и уточните, почему некоторые из них, которые вы, возможно, пробовали, не работают для вас. Конец сортировки Обзор >> требует редактирования.

— 09.04.2019 16:04

@ ZF007 спасибо за ваш комментарий и за все эти ценные детали, я постараюсь улучшить свой вклад в следующий раз.

— 09.04.2019 16:37

javascript angularjs onsen-ui

09.04.2019 15:41

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

158

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

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

Это сработало, большое спасибо, похоже, это проблема совместимости между различными включенными скриптами angularjs/onsenui, еще раз спасибо, вы спасаете жизнь.

— 09.04.2019 16:35

@John Да, это наверняка может быть проблемой совместимости. Рад, что помогло :)

— 09.04.2019 17:01

09.04.2019 16:25