指令和元素间的沟通

Question

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

我认为最好使用将消息发送到另一个处理keypress事件的指令，而不是像我在这里使用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> 
=========================================================

Answer 1

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

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

（请记住，您的DOM元素应该通过指令或控制器的作用域与逻辑绑定。使用$("#apply").click(...)是不行的！）

在此示例中，很容易说我们希望input元素吃掉“输入”按键并将它们“重定向”到按钮。 但我们真正想要的是“输入”按键input要做的是按钮将 --in这种情况下，否则执行的操作 ，调用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/

请注意，如果您希望link元素具有相同的行为，则应使用ng-click 。

如果您想避免自己在Angular代码中使用普通的jQuery选择器（例如我在此答案顶部提到的不行），请考虑Angular FAQ中的以下建议：

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

如果您想改掉习惯，请考虑从应用程序中删除jQuery。 真。 Angular具有$ http服务和功能强大的指令，使其几乎总是不必要的。 Angular捆绑的jQLite具有一些在编写Angular指令时最常用的功能，尤其是绑定到事件。