3

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

  1. создать директиву, именно директиву!
  2. Она должна отлавливать вводимые данные в

<input ng-model="data" my-counter="data">

  1. В реальном времени пользователь ввёл символ и директива должна тут же отловить их и выполнить какую-то логику над этой строкой, например провалидировать и вернуть в скоуп контролера какой-то результат

Во-первых я пробовал отследить при помощи $watch и $observe, они выполнялись 1 раз при загрузке страницы и больше изменения не отслеживали, код ниже:

app.directive('myCounter', [ function() {
    return {
        restrict: 'AE',
        scope: {
            value: '='
        },
        link : function(scope, element, attrs) {

            attr.$observe(attrs['myCounter'], function(value) {
                console.log("log" + value);
            });

            scope.$watch(scope.value, function(value) {
                console.log("log" + value);                
            });
    }
}]);

после, узнал про require 'ngModel', смог с помощью кода ниже получать в console.log вводимые значения, но как теперь, выполнив над ними какую-то логику, передать какой-то результат обратно в $scope контроллера, в котором директива была вызвана и вообще какой принцип работы ?

app.directive('myCounter', [ function() {
    return {
        require: 'ngModel',
        link : function(scope, element, attrs, modelCtrl) {

            var upperCaseFunc = function(inputValue, sco) {
                console.log("log  " + inputValue);
            };

            modelCtrl.$parsers.push(upperCaseFunc);
            upperCaseFunc(scope[attrs.ngModel]);

        }
    }
}]);
4
  • можете конкретный пример привести что вы хотите тут: В реальном времени пользователь ввёл символ и директива должна тут же отловить их и выполнить какую-то логику над этой строкой, например провалидировать и вернуть в скоуп контролера какой-то результат?
    – Grundy
    Commented 27 нояб. 2015 в 21:06
  • да, совершенно верно, тоесть по сути создать свой кастомный валидатор и после того, как все манипуляции сделаны не понимаю как вернуть результат в скоуп того контроллера внутри которого была вызвана эта директива и отловить его там Commented 28 нояб. 2015 в 16:21
  • но вы же манипуляции над ng-model делаете - она и вернет
    – Grundy
    Commented 28 нояб. 2015 в 19:02
  • эээ... ну, ng-model цепляется на инпуты и чекбоксы и предоставляет двухсторонний биндинг, допустим я хочу вывести сообщение с поздравлением или отправить что-то на сервер, если кто-то мне в инпут введёт слово "привет", тоесть я его последним кодом который я привёл выше получил, регуляркой проверил к примеру, и теперь хочу передать в контроллер в какую-то переменную true, чтобы контроллер увидел это и выполнил необходимые мне действия. А по вашему true придёт в ng-model тоесть в инпуте сменятся данные ? Даже если так, то я такого результата не добился. Как синтаксически это реализовать? Commented 29 нояб. 2015 в 0:31

1 ответ 1

1

Директивы слишком обширная тема. Разберём Ваши примеры.

  1. Вы использовали $watch без флага true, который отвечает за то, будет ли включён deep watch. Простыми словами, если deep watch выставлен в true, то вся коллекция, включая внутренние элементы будет вотчится. Если флаг не выставлен, то будет вотчится только сам массив, и не будет отслеживания элементов внутри массива.
  2. обычно второй пример с parsers используется для кастомной валидации поля. Так что не очень понятно, зачем вы хотите что-то изменить, но если уж так хочется... То все объекты в JS передаются по ссылкам, в том числе scope в функции link, и, сделав scope.foo = 'bar', переменная foo попадёт в нужный scope.
4
  • а как именно синтаксически задать $watch = true, а после его использовать ? можете пример какой-то показать ? Commented 13 окт. 2015 в 12:02
  • ` scope.$watch(scope.value, function(value) { console.log("log" + value); }, true);` Commented 13 окт. 2015 в 17:20
  • первый варинт с true не отслеживает изменения в value. 2) второй вариант сделал вот -так, да я и раньше так делал var upperCaseFunc = function(inputValue) { console.log("log " + inputValue); scope.aaa = inputValue; }; - scope.aaa = inputValue; выскочила ошибка, TypeError: Cannot set property 'aaa' of undefined п.с. да именно кастомная валидация мне и нужна, но отправить результат этой валидации я никуда не могу, мне просто надо получить его в скоуп контроллера в котором я эту директиву вызвал и пробовал много различных комбинаций прежде чем спросить Commented 14 окт. 2015 в 19:49
  • 1
    Извините, не верно я пример указал, т.к. у вас watch изначально неправильный. Должно быть scope.$watch('value'). Для кастомной валидации ничего не надо передавать в scope, прочитайте, пожалуйста, внимательно документацию: docs.angularjs.org/guide/forms Commented 14 окт. 2015 в 20:31

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.