Хобрук: Ваш путь к мастерству в программировании

Прикрепить и обработать ng-change из директивы атрибута

У нас есть директива атрибута myCustomHandler:

<input type="text" my-custom-handler ng-model="myModel">

Упрощенная версия директивы выглядит так:

.directive('myCustomHandler', function () {
return {
    require: 'ngModel',
    link: function (scope, elem, attrs) {
            scope.change = function(){
            console.log('model changed');            
        }
    }
}});

Мне нужен способ обработки события ng-change в директиве (функция триггера scope.change()).

Причина, по которой я специально попросил ng-change, заключается в том, что мой ввод - это тип = текст, и мне нужно обрабатывать каждую клавишу. Кроме того, при обработке изменений мне также нужны старые и новые значения (поэтому я предпочитаю избегать подходов jQuery).

Я уже рассматривал возможность использования $watch для модели, но это не сработает, потому что мне нужно обрабатывать событие только в том случае, если модель изменена пользователем.

Спасибо!

angularjs angularjs-directive angularjs-ng-change
10.08.2016

Ответы:


1

Я надеюсь это тебе поможет

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.model = { name: 'World' };
  $scope.name = "Felipe";
  $scope.$watch('name',function(o,n){
    console.log(o)
  })
});

app.directive('myDirective', function($compile) {
  return {
    restrict: 'E',
    scope: {
      myDirectiveVar: '=',
     //bindAttr: '='
    },
    template: '<div class="some">' +
      '<input ng-model="myDirectiveVar"></div>',
    replace: true,
    //require: 'ngModel',
    link: function($scope, elem, attr, ctrl) {
      console.debug($scope);
      //var textField = $('input', elem).attr('ng-model', 'myDirectiveVar');
      // $compile(textField)($scope.$parent);
    }
  };
});
<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="style.css">
  <script>document.write("<base href=\"" + document.location + "\" />");</script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
  <my-directive my-directive-var="name"></my-directive>{{name}}
</body>
</html>

10.08.2016
  • Этого не произойдет, потому что мне нужно обработать событие изменения внутри директивы (а не в родительском контроллере). Кроме того, мне нужна директива атрибута, а не директива элемента, поэтому я могу добавить ее к существующим элементам. 11.08.2016

    • 2

    Из документа jquery:

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

    Это означает, что событие onChange сработает, когда вы щелкнете по входу.

    function listener() {
  return {
   link: function(scope, elem, attrs) {
     elem.bind("change", function() {
       alert('change');
     });
   }
  }
}

angular.module('myApp', []);
angular
  .module('myApp')
  .directive('listener', listener);
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp">
    <input type="text" listener>
</div>

    10.08.2016
  • Причина, по которой я специально попросил ng-change, заключается в том, что мой ввод type=text, и мне нужно обрабатывать каждую клавишу. Кроме того, при обработке изменения мне также нужны старые и новые значения (в jQuery мне нужно сохранить старое значение, чтобы добиться этого). Спасибо! 11.08.2016
    • Новые материалы
    Создание кнопочного меню с использованием HTML, CSS и JavaScript
    Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..
    Внедрите OAuth в свои веб-приложения для повышения безопасности
    OAuth — это широко распространенный стандарт авторизации, который позволяет приложениям получать доступ к ресурсам от имени пользователя, не раскрывая его пароль. Это позволяет пользователям..
    Классы в JavaScript
    class является образцом java Script Object. Конструкция «class» позволяет определять классы на основе прототипов с чистым, красивым синтаксисом. // define class Human class Human {..
    Как свинг-трейдеры могут использовать ИИ для больших выигрышей
    По мере того как все больше и больше профессиональных трейдеров и активных розничных трейдеров узнают о возможностях, которые предоставляет искусственный интеллект и машинное обучение для улучшения..
    Как построить любой стол
    Я разработчик программного обеспечения. Я люблю делать вещи и всегда любил. Для меня программирование всегда было способом создавать вещи, используя только компьютер и мое воображение...
    Обзор: Машинное обучение: классификация
    Только что закончил третий курс курса 4 часть специализации по машинному обучению . Как и второй курс, он был посвящен низкоуровневой работе алгоритмов машинного обучения. Что касается..
    Разработка расширений Qlik Sense с qExt
    Использование современных инструментов веб-разработки для разработки крутых расширений Вы когда-нибудь хотели кнопку для установки переменной в приложении Qlik Sense? Когда-нибудь просили..