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等连接到按钮元素的任何逻辑，所以为了示例，让我们想象一个这样的视图：

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

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

在这个例子中，很容易说我们希望input元素吃“输入”按键并将它们“重定向”到按钮。但是我们真正想要在input中执行“输入”按键是按钮原本执行的操作 - 在这种情况下，调用{范围内的{1}}方法。

这是一个指令，它将表达式作为其submit属性（我可能称之为redirect-enter或其他东西）进行求值并计算表达式。

onEnter

以下是使其有效的指令：

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

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

请注意，如果您想在链接元素上使用相同的行为，则应使用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(); } }); } } });。

如果你正在努力避免在Angular代码中使用普通的jQuery选择器（比如我在本答案的顶部提到的no-no），请考虑Angular FAQ中的这个建议：

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

如果您正在努力摆脱这种习惯，请考虑从您的应用中删除jQuery。真。 Angular有$ http服务和强大的指令，几乎总是不必要的。 Angular的捆绑式jQLite具有一些在编写Angular指令时最常用的特性，特别是对事件的绑定。

指令和元素间通信

1 个答案: