Question

我正在使用materializecss为UI构建一个AngularJS应用程序。

现在，在materializecss的示例中，他们将focused类添加到其所有表单元素中，以便获得某些行为。

为了实现这一点，最直接的解决方案是将ng-class添加到父容器中，要求输入一个变量，该变量将使用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>

有没有办法让我的表单的所有组件重复此过程的重复性？

Answer 1

您可以尝试制作一个封装此行为的组件/指令，类似于：AngularJS custom text input component。然后你使用这样的指令/组件：

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

您有ng-class解决方案的简单性，但代码仍然是DRY。

Answer 2

我建立了一个指令：

if @user.subsidiary == true
  copy = @house.dup
  copy.user_id = @user.headquarter_id
  copy.save
end

house.save

现在，我可以将代码缩减为：

(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]);
 }());

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

2 个答案: