От новичка до гуру: Курсы программирования на CyberDuff

Ng-click не работает в div

У меня есть меню, которое появляется, когда я нажимаю на кнопку. Ну, в этом меню у меня есть пары спанов: иконка-заголовок. Довольно просто, я думаю.

Ну, каким-то образом эти промежутки не вызывают метод моего контроллера, когда я нажимаю на них. Я попытался обернуть эти пары в div и установить на них ng-click, но это тоже не работает.

Это мое контекстное меню:

<div class="opciones" ng-hide="optionsHide">
      <div>
        <span class="glyphicon glyphicon-lock icono"></span> <span class="optionsLabel">Encrypt</span>
      </div><br>
      <div ng-click="removeNote()">
        <span class="glyphicon glyphicon-trash icono"></span><span class="optionsLabel">&nbspDelete</span><br>
      </div><br>
      <div>
      <span class="glyphicon glyphicon-wrench icono"></span><span class="optionsLabel">&nbspOptions</span>
      </div>
    </div>

В настоящее время я сосредоточен только на функции «removeNote()». У меня есть методы angular и node, готовые к тестированию, но я просто не могу их использовать, так как не могу выполнить щелчок.

Это функция внутри рабочего контроллера:

    $scope.removeNote = function(){
      $http.post('/removeNote', $scope.mainNote).success(function(data){
        console.log("Note removed");
        console.log(data);
        loadNotes();
        }).error(function(err){
          console.log("ERROR ON DELETE");
          console.log(err);
          });
    }

Почему ng-click не вызывает эту функцию? Я что-то упускаю?

редактировать:

Объявление контроллера:

Верхний контроллер:

 app.controller('mainCtrl', ['$scope', '$http', '$filter', 'focus', function($scope, $http, $filter, focus){

Внутренний:

app.controller('contentCtrl', ['$scope', '$q', '$timeout', function($scope, $q, $timeout) {

Использовать:

<body ng-controller="mainCtrl" ng-cloak>
    // Things
     <content ng-controller="contentCtrl">
     // My contextual menu as shown above

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


  • Мое первое предположение состоит в том, что вы получаете сообщение об ошибке, потому что в вашем обратном вызове $http.post указано неправильное значение успеха. Проверьте журнал консоли. 13.05.2016
  • Только что исправил и отредактировал эту опечатку, но спасибо! В любом случае это не проблема, так как метод никогда не вызывается. 13.05.2016
  • Как выглядит объявление вашего контроллера и где этот контроллер установлен в вашем HTML? Спасибо! 13.05.2016
  • Проверьте div, содержащий директиву ngClick, и убедитесь, что она охватывает область, по которой вы щелкаете. В зависимости от вашего css эти div могут иметь 0 ширины и высоты или смещаться от того места, где находятся диапазон и значок. Если вы поместите директиву внутри диапазона, она сработает? если ngClick не работает в диапазоне, у вас может быть ошибка js, как предполагает @Rob 13.05.2016
  • Да, он охватывает всю территорию. Кстати, отредактировано с дополнительной информацией! 13.05.2016
  • Сделайте нам планкр (plnkr.co)! Кроме того, попробуйте прикрепить обычный onClick к диапазону, чтобы увидеть, принимает ли элемент событие мыши. Что-то может «закрывать» его. 13.05.2016
  • Вы уверены, что эта функция никогда не вызывалась? Пробовали отладчиком отловить или перед $http.post поставили console.log? попробуйте очистить свою функцию ... Может быть, она находится в ng-repeat и имеет собственную область видимости? 13.05.2016
  • @AntonTemchenko Нет, не вызывается, я уже проверил. 13.05.2016
  • @IanGabes Я думаю, что это будет беспорядок, слишком много вещей здесь и там, нужно сделать завтра, если так и будет продолжаться! 13.05.2016
  • @user6329397 user6329397 Пожалуйста, опубликуйте свои вложенные контроллеры в вопросе. В противном случае он не подлежит ответственности. 14.05.2016
  • Вот оно, @Saad 14.05.2016
  • @user6329397 user6329397 Где ваш .opciones класс div в шаблоне? Внутри contentCtrl или вне его? Кроме того, в каком контроллере определена функция $scope.removeNote()? 14.05.2016
  • Я уже понял, что происходит: директива onBlur все портит. Если я удалю его, функция будет правильно выбрана. Как я могу сохранить ngBlur? 14.05.2016
  • Где вы использовали ng-blur? Если ng-blur вызывает проблему, используйте ng-mousedown вместо ng-click. то есть ng-mousedown=removeNote() 14.05.2016
  • @Saad Это исправлено! Опубликуйте это как ответ, и я приму его! 14.05.2016
  • @user6329397 user6329397 Пожалуйста, добавьте код шаблона, где вы использовали ng-blur, чтобы другие могли понять, что происходит. Благодарю вас! 14.05.2016

Ответы:


1

Попробуйте изменить строку ng-controller:

<body ng-controller="MainCtrl as vm">

Затем вызов вашего метода:

<div ng-click="vm.removeNote()">

Сейчас работает, console.log что-то дает?

14.05.2016
Новые материалы

Сортировка вставками с помощью JavaScript
Простые типы алгоритмов сортировки Пузырьковая сортировка ➝ O(n²) Сортировка вставками ➝ O(n²) Сортировка выбором ➝ O (n²) Сортировка слиянием ➝ O (n * log n) Быстрая сортировка ➝..

Я попросил ChatGPT решить 5 вопросов по программированию LeetCode
ChatGPT , диалоговый ИИ от OpenAI , выпущенный в ноябре 2022 года, может понять и ответить практически на все, что вы спросите. У него есть возможность писать стихи, штамповать эссе и писать..

DevTools, которые изменили мою жизнь
Самые эффективные инструменты разработчика, которые я встречал за свою карьеру Время от времени вы сталкиваетесь с инструментом, который расширяет ваши способности сверхспособностями и..

Веб-приложение для чата с использованием Phoenix и Vue.js - Часть 6
В этой части мы рассмотрим перенос вещей в отдельные компоненты. Вот все части этой серии: Github: https://github.com/jespr/vue-phoenix-chat Heroku:..

Почему веб-сборка меняет правила игры? (Часть 1)
Эта статья написана, чтобы помочь новичкам понять основные концепции: с чего начать? Что для вас есть и какие реальные проблемы вы можете решить? Я уже некоторое время слышу термин..

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

Функциональное тестирование в JavaScript для начинающих
Функциональное тестирование является неотъемлемой частью процесса разработки программного обеспечения и особенно важно при работе с JavaScript. JavaScript — это универсальный и широко используемый..