指令和元素間的溝通

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指令時最常用的功能，尤其是綁定到事件。