Угловое обязательное событие

Question

Угловое обязательное событие

0

Я пытаюсь сделать что-то такое. Использование директивы. Идея, которую я имею, - связать событие с фокусом и размытием. Но проблема с размытием заключается в том, что он меняет значок сразу после того, как вводится цвет.

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

plunker

HTML

<div>
<span class="delete-tag"><i class="fa fa-tags"></i></span>

<input type="text" placeholder="enter label name" class="label-input" my-change>

<span class="span-right"><i class="fa fa-pencil"></i></span></div>

<div>
<span class="delete-tag"><i class="fa fa-tags"></i></span>
<input type="text" placeholder="enter label name" class="label-input" my-change>
<span class="span-right"><i class="fa fa-pencil"></i></span>

</div>

Javascript

var app = angular.module('angularjs-starter', []);

app.controller('MainCtrl', function($scope) {
});
app.directive('myChange', function() {
return function(scope, element) {
element.bind('focus', function() {
  console.log(element);
   element[0].previousElementSibling.firstChild.className = 'fa fa-trash';
   element[0].nextElementSibling.firstChild.className = 'fa fa-check';
});
element.bind('blur', function() {
   element[0].previousElementSibling.firstChild.className = 'fa fa-tags';
   element[0].nextElementSibling.firstChild.className = 'fa fa-pencil';
});
};
 });

Invictus 12 авг. 2016, в 09:34

Источник

0

попытаться не изменять DOM внутри angular (если вы не компилируете html), посмотрите на docs.angularjs.org/api/ng/directive/ngClass
Isaac 12 авг. 2016, в 07:29

Теги:

javascript

jquery

html

angularjs

css

2 ответа

Ещё вопросы

попытаться не изменять DOM внутри angular (если вы не компилируете html), посмотрите на docs.angularjs.org/api/ng/directive/ngClass

Dinesh Shah · Answer 1 · 2016-08-12T05-47-00.000Z

просто измените свой метод события размытия директивы, как показано ниже.

 element.bind('blur', function() {
  if(element[0].value.length == 0)
  {
   element[0].previousElementSibling.firstChild.className = 'fa fa-tags';
   element[0].nextElementSibling.firstChild.className = 'fa fa-pencil';
  } 
});

Luxor001 · Answer 2 · 2016-08-12T05-54-00.000Z

Ваша проблема связана с событием размытия, как предположил @Dinesh Shah: вы можете легко исправить это, используя код, который он опубликовал.

Но я настоятельно рекомендую вам создать директиву, которая обрабатывает ваш вход, как показано в этом примере.

app.directive('inputBox', function() {
  return {
    restrict: 'E',
    scope : {
      value : '='
    },
    template: '<div><span class="delete-tag"><i class="fa fa-tags" ng-class="leftClass"></i></span>' + 
      '<input type="text" placeholder="enter label name" class="label-input" ng-model="value">' +
      '<span class="span-right" ng-class="rightClass"><i class="fa fa-pencil"></i></span>' +
      '</div>',
    link: function(scope, element, attrs, ctrl){

      //you could ng-focus/ng-blur here
      var input = element.children().children().eq(1);

      input.bind('focus', function() {
         scope.leftClass = 'fa fa-trash';
         rightClass = 'fa fa-check';
      });
      input.bind('blur', function() {
         if(!scope.value.length)
         {
           scope.leftClass = 'fa fa-tags';
           scope.rightClass = 'fa fa-pencil';
        }
       });
    }
  }
});

Таким образом, вы сможете легче обрабатывать вводные данные. Кроме того, вы должны использовать ng-class вместо того, чтобы полагаться на javascript/jquery для переключения классов css.

Другими словами, это правильный угловой способ вещей.