AngularJS - 通过指令代码访问模板页面中的UI元素

Question

我有以下AngularJS应用程序

模板.html

<!-- Complex HTML code which contains other input -->
<input
    ng-keyup="enter($event)"
/>
<!-- Complex HTML code which contains other input -->

我的指令代码如下。

angular.module('myApp')
    .directive('myDirective', function(appConfiguration) {
        return {
            templateUrl: 'template.html',
            controller: function ($scope) {
                $scope.enter = function(e) {
                    if (e.keyCode == 13) {
                        // Perform some network operation...
                        alert('How to make my input lost focus?');
                    }
                };
            }
        }

我希望在按下enter时使我的输入失去焦点。但是，我不知道，当我在指令代码中时，我如何访问input。

知道吗？

Answer 1

访问元素：

您只需要在指令的控制器中注入$element即可访问元素。

在进入时失去焦点

访问后，您只需要在指令的链接函数中侦听键关闭事件。并且每当用户按 Enter 时，您应该模糊（取消聚焦）元素。

angular.module('myApp', [])
.directive('loseFocus', function() {
    return {        
        controller: function ($element) {
            $element.bind("keydown keypress", function (event) {
                if(event.which === 13) {
                    $element[0].blur();
                }
            });
        }
    }
});

而且你不需要将ng-keyup参数传递给指令，因为侦听该事件是指令的工作。

<input lose-focus>

这是它的jsfiddle。

更新

似乎 my-directive 用于创建多个输入。然后，这里最好的方法是分离逻辑。my-指令可以继续生成输入，失去焦点指令可以处理回车键上的模糊事件。

更新的jsFiddle在这里。

Answer 2

只需使用以下方法签名即可获取元素

controller: function ($scope, $element)

Answer 3

我相信您可以使用控制器或链接函数来传递元素和属性。这是来自AngularJS文档的一个例子。您可以对控制器功能执行相同的操作。

.directive('myCurrentTime', ['$interval', 'dateFilter', function($interval, dateFilter) {
function link(scope, element, attrs) {
  var format,
      timeoutId;
  function updateTime() {
    element.text(dateFilter(new Date(), format));
  }
  scope.$watch(attrs.myCurrentTime, function(value) {
    format = value;
    updateTime();
  });
  element.on('$destroy', function() {
    $interval.cancel(timeoutId);
  });
  // start the UI update process; save the timeoutId for canceling
  timeoutId = $interval(function() {
    updateTime(); // update DOM
  }, 1000);
}
return {
  link: link
};

}]）;