Question

我有一个提供简单搜索框的指令 - 其HTML如下所示：

<div class="search input-group">
    <input type="text" 
           ng-model="text"
           ng-change="onChange()"
           placeholder="Search here..."
           class="form-control">
    <span class="input-group-btn">
        <button class="btn btn-default glyphicon glyphicon-search"></button>
    </span>
</div>

一切顺利，有效，我可以像这样使用它：

<searchbox ng-model="search" />

但是，现在我希望搜索框在某些情况下具有自动对焦功能，在某些情况下不会，为此，只需能够做到这一点：

<searchbox ng-model="search" autofocus />

并导致将autofocus属性转移到指令中的<input>标记。这可能吗？我该怎么做呢？有没有办法将特定属性转移到特定的子元素？

Answer 1

这是一种方式：从你的指令的链接函数，读取autofocus属性，如果已定义，使用DOM操作将其写入<input>。（在链接函数中DOM操作正常）：

    link: function(scope,elem,attrs) {
        if( angular.isDefined(attrs.autofocus) ) {
            var inp = elem[0].querySelectorAll('input');
            inp[0].setAttribute('autofocus','autofocus');
        }
    }

表明原则的小提琴：http://jsfiddle.net/5yhp2xa0/

可能的问题：我不确定HTML的autofocus是否适用于“稍后”插入页面的模板（即在Angular路由更改后，{{1}时显示等）。如果是这种情况，则应使用其他解决方案（可能很简单，只需拨打ng-if而不是inp[0].focus()）。

由于问题的标题是“将指令中的属性转换为子元素”，我还要解决一般性问题：

属性不会自动传输
如果属性是非指令的，则可以使用与上述答案类似的技术，即从链接函数操纵DOM。如果属性值是动态的，事情会变得更复杂，但总的想法是相同的。
如果属性是指令，事情就更难了。最有可能你必须使用编译功能并操纵DOM的模板。但是，在这种情况下，我更倾向于使用inp[0].setAttribute('autofocus','autofocus');配置直接合作指令，尤其是使用可选修饰符，例如： require。当然，只有控制两个指令才能实现这一点。

Answer 2

您可以使用标签索引。我在

下列出了tab索引的一些行为

tabindex值可以允许一些有趣的行为。

如果给定值为“-1”，则元素无法选项卡，但可以通过编程方式将焦点赋予元素（使用element.focus（））。如果给定值0，则元素可以通过键盘聚焦并落入文档的标签流中。值大于0会创建一个优先级，其中1是最重要的。

或者您可以使用以下javascript代码。

document.getElementById('txtId').focus();

Answer 3

我会以编程方式执行此操作。感觉就像你要求太多角度来自动携带属性。该指令的属性可用作链接和编译函数的参数，应该很容易使用指令模板在外部应用属性。

例如，试试这个：

... directive code
link: function(scope, elem, attrs) {
    console.log(attrs.autofocus);
}

你可以从那些

那样的attrs中检查自动对焦的值

将指令中的属性转换为子元素

3 个答案: