javascript - angular form对象是否提供获取关联DOM节点的方法

Question

在 AngularJS 中，我目前将表单对象传递给一个函数:

<a ng-click="clearSearch(searchForm)">clear</a>

此函数的目标是清除输入字段(name = search)。

我可以像这样访问搜索输入字段:

searchForm.search

我需要做的是:

searchForm.search.$element[0].focus();

但是，我看不到访问表单元素的方法(在我设计的示例 $element 中)

Answer 1

不，在 Angular 中，您通常无法从范围对象访问 DOM 元素(尽管您可以反过来)。

Angular 在 Controller 和 HTML 元素之间有非常严格的分离，相反它们使用指令来管理与 DOM 元素的交互。

要处理此问题，您可以编写一个指令，负责触发输入元素上的焦点(在本例中为 formFocus 指令)。然后我们可以通过 Angular 范围将消息从 Controller 发送到指令

示例代码如下:

JavaScript:

myModule.controller('myController', function($scope){
    $scope.clearSearch = function(form){
        // Your current behaviour for clearing the form goes here.
        // ...


        // Broadcast an event down to your child scopes.
        // If anything is interested in your custom 'formFocus'
        // event then it will listen and respond to the event.
        $scope.$broadcast('formFocus');
    };
})
.directive('formFocus', function(){
    return {
        link: function(scope, element, attr){
            // Add our listener for the 'formFocus' event
            // and write the behaviour to focus on the input element.
            scope.$on('formFocus', function(){
                element[0].focus();
            });
        }
    };
});

HTML:

<form ng-controller="myController"
      name="searchForm">

    <!-- Add the 'form-focus' directive to the input. -->
    <input type="text" name="search" form-focus>

    <a ng-click="clearSearch(searchForm)">clear</a>
</form>

这可能看起来有点奇怪，但 DOM 与 Controller 的分离使事情变得非常灵活。例如，您的代码不需要关心哪个输入元素将获得焦点。

这是一个 Fiddle 展示它的实际效果:http://jsfiddle.net/Sly_cardinal/bJuS5/1/