0

I am trying to add $focused property to my input fields (like $touched or $valid). Here is my current code:

directive('ngModel', function () {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function ($scope, $element, $attrs, ngModelScope) {
      $element.on('focus', function () {
        ngModelScope.$focused = true
      })
      $element.on('blur', function () {
        ngModelScope.$focused = false
      })
      ngModelScope.$focused = false
    }
  }
})

..and it's not working. Seems like the $digest is not firing and changes made with ngModelScope are not applying to dom.

HTML:

<form novalidate name="loginForm">
  <input type="email" placeholder="Email" name="email" ng-model="email" >
  <span ng-show="loginForm.email.$focused">Focused</span>
</form>
Matt Goodrich
  • 4,053
  • 4
  • 23
  • 35
mcfinley
  • 11
  • 4
  • possible duplicity with this [extends angular directive](http://stackoverflow.com/questions/17005122/extending-angular-directive) – Matej Marconak Mar 14 '17 at 15:34
  • The situation is the same, but the problem's not. I change the scope, but changes are not appealing immediately i focus/blur the input – mcfinley Mar 14 '17 at 15:37
  • not good solution, but you can use `if (!$scope.$$phase) $scope.$apply();` after you set `$focused` – Matej Marconak Mar 14 '17 at 15:45
  • `$scope.$apply();` should help you. Take a look at this [link](http://jimhoskins.com/2012/12/17/angularjs-and-apply.html) for more info about what is really happend with your code. – Brenno Leal Mar 14 '17 at 15:50

0 Answers0