От новичка до гуру: Курсы программирования на 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
Новые материалы

Отслеживание состояния с течением времени с дифференцированием снимков
Время от времени что-то происходит и революционизирует часть моего рабочего процесса разработки. Что-то более забавное вместо типичного утомительного и утомительного процесса разработки. В..

Я предполагаю, что вы имеете в виду методы обработки категориальных данных.
Я предполагаю, что вы имеете в виду методы обработки категориальных данных. Пожалуйста, проверьте мой пост Инструментарий специалиста по данным для кодирования категориальных переменных в..

Игра в прятки с данными
Игра в прятки с данными Я хотел бы, чтобы вы сделали мне одолжение и ответили на следующие вопросы. Гуглить можно в любое время, здесь никто не забивается. Сколько регионов в Гане? А как..

«Раскрытие математических рассуждений с помощью Microsoft MathPrompter и моделей больших языков»
TL;DR: MathPrompter от Microsoft показывает, как использовать математические рассуждения с большими языковыми моделями; 4-этапный процесс для улучшения доверия и рассуждений в математических..

Раскройте свой потенциал в области разработки мобильных приложений: Абсолютная бесплатная серия
Глава 6: Работа в сети и выборка данных Глава 1: Введение в React Native Глава 2: Основы React Native Глава 3: Создание пользовательского интерфейса с помощью React Native Глава 4:..

Все о кейсах: Camel, Snake, Kebab & Pascal
В программировании вы сталкивались с ними при именовании переменной, класса или функции. Поддержание согласованности типов и стилей случаев делает ваш код более читабельным и облегчает совместную..

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