Question

我是角色的新手，我正在尝试编写一个可重复使用的指令来设置对某些父级内部元素的关注。

<div class="products" ng-controller="productsController" id="products"  >
    Name
    <input type="text"  ng-model="name" tabindex="1" focus-element />
    Price
    <input type="text"  ng-model="price" tabindex="2" focus-element />
</div>

.directive('focusElement', function () {    
    return {
        restrict: 'A',
        link: function($scope, $element, attrs) {
            var fE = function() {
                if ($element[0].value === '') {                    
                    var elms = document.getElementsByTagName('body')[0].getElementsByTagName("input");
                    var alredyFocused = false;
                    for (var i = 0; i < elms.length; i++) {
                        if (elms[i].value === '' && Number(elms[i].getAttribute("tabindex")) < attrs.tabindex) {
                            alredyFocused = true;
                            continue;
                        }
                    }
                    if (!alredyFocused) {
                        $element[0].focus();
                    }
                }
            }

            fE();
            //...some other logic
        }
    }
});

在这段代码中，我在整个体内寻找错误的输入元素。如果我希望指令可以重用（div中的Id或类或html与div不同），如何将指令限制为父div（控制器）？

我试图为div本身编写一个指令，以便将焦点放在第一个没有值的子节点上但是在这种情况下我不能使用每个输入元素的ng-model来跟踪模型的变化（使用$scope.$watch("?ngModule attribute from an input which is many?", function () {})）。

Answer 1

为什么不编写一个带有回调函数的简单指令，并在元素获得焦点时调用它。类似的东西：

.directive('myDirective', function(){
    return {
        scope: {
            callback: '&'
        },
        link: function (scope, element) {
            element.bind('focus', function() {
                scope.$apply(scope.callback());
            });
        }
    }
});

该指令不需要知道回调正在做什么，只需要在焦点上调用它。这可以应用于需要焦点行为的所有元素。

http://jsfiddle.net/b6ww0rx8/11/

可重用的Angular指令，用于设置对输入元素的关注

1 个答案: