2

我创建了以下简单指令来重定向输入按键事件。

我认为使用向另一个处理按键事件的指令发出消息可能会更好，而不是像我在这里所做的那样使用 jQuery 标识符。

与 Angular 哲学一致，处理元素到元素通信时的最佳实践是什么？为什么？

谢谢

=========================================================
.directive('redirectEnter',function() {
    return {
        restrict : 'A',
        link : function($scope,$element,$attr) {
            $element.keypress(function($event) {
                if($event.keyCode == '13') {
                    $($attr.redirectEnter).click();
                    $event.stopPropagation();
                    $event.preventDefault();
                }
            });
        }
    }
})
=========================================================
<a redirect-enter="#apply">Redirect enter example</a>
<button id="apply">Apply</button> 
=========================================================
4

1 回答 1

0

您的 HTML 示例没有通过ng-click等连接到按钮元素的任何逻辑，因此为了举例，让我们想象一下这样的视图：

<input ng-model="model.something">
<button ng-click="submit()">

（请记住，您的 DOM 元素应该通过指令或控制器的范围与逻辑相关联。使用$("#apply").click(...)是禁忌！）

在这个例子中，很容易说我们希望input元素吃掉“输入”按键并将它们“重定向”到按钮。但我们真正想要的“输入”按键input是按钮将执行的操作——在这种情况下，调用submit作用域上的方法。

这是一个指令，它将一个表达式作为其redirect-enter属性进行评估（我可能会称其为onEnter）并评估该表达式。

<input ng-model="model.something" redirect-enter="submit()">
<button ng-click="submit()">Submit</button>

这是使这项工作起作用的指令：

app.directive('redirectEnter', function() {
  return {
    restrict : 'A',
    link : function($scope,$element,$attr) {
      $element.keypress(function($event) {
        if($event.keyCode == '13') {
          $scope.$eval($attr.redirectEnter);
          $event.stopPropagation();
          $event.preventDefault();
        }
      });
    }
  }
});

这是关于 jsFiddle 的示例：http: //jsfiddle.net/BinaryMuse/HgD9y/

请注意，如果您希望在链接元素上具有相同的行为，则应使用ng-click.

如果您正在努力避免在您的 Angular 代码中使用普通的 jQuery 选择器（就像我在此答案顶部提到的否决），请考虑Angular FAQ中的以下建议：

停止尝试使用 jQuery 修改控制器中的 DOM。真的。这包括添加元素、删除元素、检索它们的内容、显示和隐藏它们。使用内置指令，或在必要时编写自己的指令来进行 DOM 操作。有关复制功能，请参见下文。

如果您正在努力改掉这个习惯，请考虑从您的应用程序中删除 jQuery。真的。Angular 具有 $http 服务和强大的指令，几乎总是不需要它。Angular 捆绑的 jQLite 具有一些最常用于编写 Angular 指令的特性，尤其是绑定到事件。

于 2013-02-13T07:05:36.277 回答