如何通過點擊文檔來觸發功能

這是我的情況：我有一個字段，一旦用戶雙擊，它將編輯該字段。這很好，工作。我有兩個功能：ok和cancel。取消禁用編輯模式。 ATM，用戶必須單擊取消禁用編輯模式。我想要的是當用戶點擊頁面上的其他任何地方時，允許禁用編輯模式。我怎樣才能用Angular來實現這一點？如何通過點擊文檔來觸發功能

編輯：我將我的標記（注意：這是玉）：

tr(ng-repeat="user in users | filter:searchText"s) 

    td(ng-dblclick="editItem(user)", hm-double-tap="editItem(user)", ng-blur="cancelEditing()") 

     span(ng-hide="user.editing") {{user.name}} 

     form(ng-submit="doneEditing(user)", ng-show="user.editing", class="inline-editing-2", ng-blur="cancelEditing()") 

      input(type="text", class="form-control", ng-model="user.name") 

     button(class="btn btn-success mr-1", ng-show="user.editing", ng-click="doneEditing(user)") 

      span(ng-click="doneEditing(user)").fa.fa-check-circle 

     button(class="btn btn-warning mr-1", ng-show="user.editing", ng-click="cancelEditing(user)") 

      span(ng-click="cancelEditing(user)").fa.fa-times-circle

正如你所看到的，我已經有了用戶HG-重複。當雙擊td元素時，它使user.editing爲真，以便顯示錶格。 cancelEditing(user)使變量爲false，只顯示字段。

我已經添加ng-blur="cancelEditing()" on the tr , td ,範圍and表單`並沒有工作。

任何想法我錯過了什麼？

來源

2014-08-31 WagnerMatosUK

您可以使用模糊。 – Satpal 2014-08-31 18:07:59

我假設你想要一個「內聯編輯器」，爲什麼不使用現有的編輯器，如：http://vitalets.github.io/angular-xeditable/ – MiTa 2014-08-31 19:12:01

使用ng-blur將您的cancel事件綁定到元素。當元素失去焦點時它會發射。

IE：<input ng-blur="cancel()" />

注：取消功能必須範圍內。從評論

Angular ngBlur Docs

更新：

給輸入元素焦點時，你的雙標籤事件觸發使現場編輯。您的模糊事件可能不會觸發，因爲輸入元素從未擁有焦點。

你可以從你的editItem函數內部或從指令內部做到這一點。

舉個例子：

yourApp.directive('hmDoubleTap', function(){ 
    return function(scope, element, attr){ 
     if(doubleTap) { 
      // Fire editItem(user) 
      // You could add your .focus() inside editItem(). 

      // Or focus the first input element at the end of the directive. 
      element.find("input")[0].focus(); 
     } 
    }; 
});

來源

2014-08-31 18:07:43 Timeout

不幸的是它沒有工作。我用我的完整代碼編輯了一些代碼。我試過在幾個元素（td，tr，span，input和form）上添加ng-blur =「cancelEditing（）」，但都沒有成功。有什麼建議麼？ – WagnerMatosUK 2014-08-31 18:31:47

-3

另一種方法是處理這樣的任何其他元素上的click事件：

$('#field-no-edit').click(function() { 
    $(this).hide(); 
    $('#field-edit').show().focus(); 
}); 
$('body').on('click', function(e){ 
    console.log($(e.target).attr('id')); 
    if ($(e.target).attr('id') != 'field-no-edit') { 
     console.log('not'); 
     $('#field-no-edit').text($('#field-edit').val()); 
     $('#field-edit').hide(); 
     $('#field-no-edit').show(); 
    } 
});

JSFiddle

來源

2014-08-31 18:13:26 stefanr

模糊操作不起作用。 – Sid 2014-08-31 18:23:07

-2

B1J的回答只會如果工作元素獲得焦點。在雙擊後，hm-double-tap指令是否會將元素聚焦？如果沒有，你將不得不在editItem函數中觸發焦點。

來源

2014-08-31 18:43:46

目前它不會，但實際上這將是一個很好的補充。我如何將焦點添加到我的功能？ – WagnerMatosUK 2014-08-31 18:45:53

在editItem函數中嘗試如下所示：user.target.focus（）; – 2014-08-31 18:54:27

如何通過點擊文檔來觸發功能

回答

相關問題