Javascript 使用Angular JS向DOM元素添加类的重复性较小的方法

我正在为UI使用MaterialECSS构建AngularJS应用程序

现在，在MaterializeCS的示例中，他们将

聚焦的
类添加到其所有表单元素中，以获得特定的行为

为了实现这一点，直接的解决方案是向父容器添加
ng类
，请求使用输入元素中的
ng blur
和
ng focus
属性设置变量

此代码说明了上述解决方案：

<div id="myFieldParent" data-ng-class="{'focused': vm.focused}">
    <input type="text" name="myfield" data-ng-model="vm.myfield"
        data-ng-focus="vm.focused = true" data-ng-blur="vm.focused = false"/>
</div>



有没有办法使我的表单的所有组件都不那么重复此过程？
您可以尝试制作一个组件/指令来封装此行为，类似于以下内容：。然后使用如下指令/组件：

<my-input model="vm.myField" name="myField"></my-input>



您有简单的ng类解决方案，但代码仍然是干的。
我建立了一个指令：

(function () {
     'use strict';

    function focused() {

        return {
            restrict: 'A',
            link:
            function (scope, element, attrs) {
                var clazz = attrs['focused'] || "focused";

                var parent = angular.element(element.parent());
                element.on("focus",function () {
                    if (!parent.hasClass(clazz)) {
                        parent.addClass(clazz)
                    }
                    scope.$apply();
                });
                element.on("blur",function () {
                    if (parent.hasClass(clazz)) {
                        parent.removeClass(clazz)
                    }
                    scope.$apply();
                });
            }
        }
    }

    angular.module('app')
        .directive('focused', [focused]);
 }());

现在，我可以将代码简化为：

<div>
    <input type="text" name="myfield" data-ng-model="vm.myfield"
        data-ng-focused/>
</div>


表单元素是否足够相似，您可以用包含这些属性的指令替换它们？是的，它们是。我想我找到了解决办法。让我分享一下