Question

我无法理解Angular指令。我想使用一个简单的属性扩展到更复杂的html，但该模板的某些部分可以通过参数替换。

鉴于此代码：

<form role="form" name="databaseForm">
    <input type="text" name="connectionName"
           ng-focus="databaseForm.connectionName.$focused = true;databaseForm.connectionName.$blurred = false;"
           ng-blur="databaseForm.connectionName.$blurred = true;databaseForm.connectionName.$focused = false;"
           >
</form>

我想用更简洁的指令（例如“模糊聚焦”）来编写它：

<form role="form" name="databaseForm">
    <input type="text" name="connectionName"
           blurred-focused="'databaseForm.connectionName'"
           >
</form>

这意味着我可以很容易地将其重新用于其他输入：

<form role="form" name="databaseForm">
    <input type="text" name="username"
           blurred-focused="'databaseForm.username'"
           >
</form>

此预期结果是，使用此指令的输入将根据用户与输入的交互自动应用$ blurred和$ focused属性。

谢谢。

更新我最终使用MMHunter的版本，其范围是非隔离的。我添加了一些逻辑来自动查找表单和字段对象，因此我不需要全部指定它。

我的指示：

(function () {
    "use strict";

    angular
    .module("app.shared.widgets")
    .directive("blurredFocused", blurredFocused);

    blurredFocused.$inject = ["_"];
    /* @ngInject */
    function blurredFocused(_) {
        return {
            restrict: "A",
            priority: -1,
            link: function(scope, element, attributes) {

                element.on("blur", function () {
                    var formFieldName = element[0].form.name + "." + element[0].name;
                    var target = _.get(scope, formFieldName);
                    scope.$apply(function() {
                        target.$blurred = true;
                        target.$focused = false;
                    });

                });

                element.on("focus", function () {
                    var formFieldName = element[0].form.name + "." + element[0].name;
                    var target = _.get(scope, formFieldName);
                    scope.$apply(function() {
                        target.$blurred = false;
                        target.$focused = true;
                    });
                });
            }
        };
    }

})();

以及它的用法示例：

<form role="form" name="databaseForm">
    <input type="text" name="connectionName" blurred-focused>
</form>

Answer 1

使用angular指令不难实现。但根据是否使用隔离范围，情况可能会有所不同。

对于隔离范围，以下代码为straightForward。将值绑定到“模糊聚焦”指令中的孤立范围，并聆听事件。

//with isolated scope
app.directive("blurredFocused", [function () {
        return {
            restrict:"A",
            priority:-1,
            scope:{
              blurredFocused:"="
            },
            link:function(scope,ele,attrs){

                ele.on("blur",function(){
                  scope.$apply(function(){
                      scope.blurredFocused.$blurred = true;
                      scope.blurredFocused.$focused = false;
                  })
                })

                ele.on("focus",function(){
                  scope.$apply(function(){
                    scope.blurredFocused.$blurred = false;
                    scope.blurredFocused.$focused = true;
                  })
                })
            }
        }
    }]);

但是没有孤立的范围，事情可能会有点棘手。我们需要通过属性值手动查找范围值。

//without isolated scope
app.directive("blurredFocused", [function () {
    return {
        restrict:"A",
        priority:-1,
        link:function(scope,ele,attrs){

            ele.on("blur",function(){
              var targetField = scope[attrs.blurredFocused];
              scope.$apply(function(){
                targetField.$blurred = true;
                targetField.$focused = false;
              })

            })

            ele.on("focus",function(){
              var targetField = scope[attrs.blurredFocused];
              scope.$apply(function(){
                targetField.$blurred = false;
                targetField.$focused = true;
              })
            })
        }
    }
}]);

以下是plunker

我建议您使用没有隔离范围的那个。属性指令总是一起使用，因此隔离范围可能不是一个好主意。

Angular指令使用ng-blur和ng-focus

1 个答案: