如何从焦点/模糊中更改父元素的类？

Question

如何从焦点/模糊中更改父元素的类？

Fla*_*ape 2 events focus blur parent angularjs

我正在尝试在获得焦点时将类添加到输入的父级.我可以得到父母,但我似乎无法设置类名.这是我在这个plunkr尝试的:

http://plnkr.co/edit/eEfSeDb7i3uujjBZt21z?p=preview

<!DOCTYPE HTML>
<html id="ng-app" ng-app="app"> <!-- id="ng-app" IE<8 -->

<head>
    <link rel="stylesheet" href="http://nervgh.github.io/css/animate.min.css" />    
    <style>
        .highlight {
          border: 2px solid red;
        }
        .blue-border
        {
          border:2px solid blue;
        }
    </style>

     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>    
    <script>
        angular.module( 'app', [])
            .run( function( $rootScope, $timeout ) {                   

                 $rootScope.focusInput= function($event )
                {
                    angular.element($event.target).parent().className += " " + 'highlight';
                    console.log( angular.element($event.target).parent() );
                };

                $rootScope.blurInput= function($event )
                {
                    angular.element($event.target).parent().className.replace(' highlight', '');                                       
                };
            });
    </script>

</head>
<body>

    <div class="blue-border">

      <input ng-focus="focusInput($event)" ng-blur="blurInput($event)" value="Lactobacillus acidophilus"/>  

</div>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

请注意它如何成功记录父项.但是,边框不会变红!还有其他更"Angulary"的做法吗？

Answer 1

Noa*_*mon 9

Angular的JQLite为此提供了'addClass'和'removeClass'函数:

angular.element($event.target).parent().addClass('highlight');

Run Code Online (Sandbox Code Playgroud)

请参阅此处的文档:https://docs.angularjs.org/api/ng/function/angular.element

归档时间：	11 年，9 月前
查看次数：	6016 次
最近记录：	11 年，9 月前