Question

假设我有一个像这样的组件

app.component('test',{
    template: '<input type="text" id="inputbox"></input>',
    controller: function() {
        ctrl.focusInput = function(){
                var inputbox = document.getElementById("inputbox");
                inputbox.focus();
            }
        };
    }    
});

我想获取输入的DOM元素，这样我就可以随时关注它。但是inputbox属于全局范围，如果我不止一次使用此组件，这将是一个问题。如何通过限制inputbox的范围或使用其他一些机制来获取此组件中的输入DOM？

Answer 1

您可以将触发组件的元素注入控制器函数，如下所示：

由于$element是jqLite包装对象，您可以使用jQuery DOM遍历方法（如children）和find来查找input元素。

angular
  .module('myApp', []);
angular
  .module('myApp').component('test', {
    template: '<input type="text" id="inputbox"></input>',
    controller: function($scope, $element, $attrs) {
      var ctrl = this;
      ctrl.focusInput = function() {
        $timeout(function() {
          $element.find('input').focus();
        }, 0);
      };
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

<div ng-app="myApp">
  <test></test>
</div>

Angular：获取组件中的元素

1 个答案: