template.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 即可访问元素。

迷失焦点

访问后，您只需要在指令的链接功能中监听keydown事件。每当用户按下回车键时，您应该模糊（不聚焦）元素。

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-directive可以继续生成输入，lost-focus指令可以处理输入键上的blur事件。

更新jsFiddle就在这里。

Answer 2

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

controller: function ($scope, $element)

Answer 3

我相信你可以使用控制器或链接功能来传递元素和属性。以下是AngularJS doc的示例。你可以为控制器功能做同样的事情。

.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
};

}]）;

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

template.html

3 个答案:

访问元素：

迷失焦点