Угловая директива для использования размытия и фокуса

0

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

Учитывая этот код:

<form role="form" name="databaseForm">
    <input type="text" name="connectionName"
           ng-focus="databaseForm.connectionName.$focused = true;databaseForm.connectionName.$blurred = false;"
           ng-blur="databaseForm.connectionName.$blurred = true;databaseForm.connectionName.$focused = false;"
           >
</form>

Я хотел бы написать его, используя более краткую директиву (например, "размытую"):

<form role="form" name="databaseForm">
    <input type="text" name="connectionName"
           blurred-focused="'databaseForm.connectionName'"
           >
</form>

Поэтому это означает, что я могу очень легко повторно использовать его для других входов:

<form role="form" name="databaseForm">
    <input type="text" name="username"
           blurred-focused="'databaseForm.username'"
           >
</form>

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

Спасибо.


Обновление: я закончил использование версии MMHunter, где область неизолирована. Я добавил некоторую логику, чтобы автоматически найти объект формы и поля, так что мне не нужно было все это указывать.

Моя директива:

(function () {
    "use strict";

    angular
    .module("app.shared.widgets")
    .directive("blurredFocused", blurredFocused);

    blurredFocused.$inject = ["_"];
    /* @ngInject */
    function blurredFocused(_) {
        return {
            restrict: "A",
            priority: -1,
            link: function(scope, element, attributes) {

                element.on("blur", function () {
                    var formFieldName = element[0].form.name + "." + element[0].name;
                    var target = _.get(scope, formFieldName);
                    scope.$apply(function() {
                        target.$blurred = true;
                        target.$focused = false;
                    });

                });

                element.on("focus", function () {
                    var formFieldName = element[0].form.name + "." + element[0].name;
                    var target = _.get(scope, formFieldName);
                    scope.$apply(function() {
                        target.$blurred = false;
                        target.$focused = true;
                    });
                });
            }
        };
    }

})();

И пример его использования:

<form role="form" name="databaseForm">
    <input type="text" name="connectionName" blurred-focused>
</form>
  • 0
    Я действительно не понимаю, что Вам нужно. Ng-focus и ng-blur являются противоположными директивами, потому что blur = потерял фокус. ng-focus код запускается на фокусе ng blur на размытие. Прочтите об этом - w3schools.com/angular/ng_ng-focus.asp , w3schools.com/angular/ng_ng-blur.asp
  • 0
    По сути, я хочу сжать синтаксис, который у меня есть в первом примере, во что-то более пригодное для повторного использования, без необходимости копировать и вставлять эту логику везде. То, что делает логика, не имеет отношения к вопросу. Я знаю, что размытие и фокусировка противоположны, но я бы хотел, чтобы и свойства $ blurred, и $ focus были доступны с одним синтаксисом.
Теги:
angularjs-directive

1 ответ

1
Лучший ответ

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

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

//with isolated scope
app.directive("blurredFocused", [function () {
        return {
            restrict:"A",
            priority:-1,
            scope:{
              blurredFocused:"="
            },
            link:function(scope,ele,attrs){

                ele.on("blur",function(){
                  scope.$apply(function(){
                      scope.blurredFocused.$blurred = true;
                      scope.blurredFocused.$focused = false;
                  })
                })

                ele.on("focus",function(){
                  scope.$apply(function(){
                    scope.blurredFocused.$blurred = false;
                    scope.blurredFocused.$focused = true;
                  })
                })
            }
        }
    }]);

Но без изолированного масштаба все может быть немного сложнее. нам нужно найти значение области вручную по значению атрибутов.

//without isolated scope
app.directive("blurredFocused", [function () {
    return {
        restrict:"A",
        priority:-1,
        link:function(scope,ele,attrs){

            ele.on("blur",function(){
              var targetField = scope[attrs.blurredFocused];
              scope.$apply(function(){
                targetField.$blurred = true;
                targetField.$focused = false;
              })

            })

            ele.on("focus",function(){
              var targetField = scope[attrs.blurredFocused];
              scope.$apply(function(){
                targetField.$blurred = false;
                targetField.$focused = true;
              })
            })
        }
    }
}]);

Вот плункер

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

  • 0
    Огромное спасибо. Есть ли какая-то конкретная причина, по которой вы используете приоритет -1? Насколько я понимаю, он устанавливает приоритет выполнения ниже значения по умолчанию, равного 0. Это что-то вроде лучшей практики?
  • 0
    Ну, это не имеет большого значения. Лично я обычно использую -1, чтобы гарантировать, что поведение будет следовать за другими встроенными или сторонними директивами.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню