Question

我正在尝试在div上添加ng-blur（onFocusOut事件），其中div包含html输入元素radio和checkbox。因为ng-model在数组（样本）中保存我的值所以我想在从div中聚焦而不是从div包含的每个输入元素时触发事件。在重点关注div时，我将使用$ http服务来保存服务器上的模型。

<div ng-app="app">
        <div ng-controller="focusCtrl">
            <div ng-blur="sentHttp()" style="height:100px;width:100px;background-color:blue;">
               <input type="radio" name="radio" ng-model="sample[shrk]" />A
               <input type="radio" name="radio" ng-model="sample[shrk]" />b

        <input type="checkbox"  ng-model="sample[shrk]" />1
        <input type="checkbox"  ng-model="sample[shrk]" />2
        <input type="checkbox"  ng-model="sample[shrk]" />3

           </div>
        </div>
        </div>

角度控制器

angular.module('app').controller('focusCtrl', ['$scope', function ($scope) {
    $scope.sample= {};
    $scope.sentHttp = function() {
        console.log("I'm called!");
        };
}]);

提前致谢。

Answer 1

有人说div不会触发焦点/模糊事件，但是，使用一个简单的技巧，你可以实现它......

解决方案位于tabindex属性... https://www.barryvan.com.au/2009/01/onfocus-and-onblur-for-divs-in-fx/

在div外部点击时有效，但在标签页面上没有...您需要使用此代码段进行更多操作...

function TestCtrl($scope) {
  $scope.fields = {
    "firstname": "Giuseppe",
    "surname": "Mandato"
  };
  
  $scope.sendHttp = function() {
    console.log("fields", $scope.fields);
  };
}

angular
  .module('test', [])
  .controller("TestCtrl", ["$scope", TestCtrl])
;

.test {
  padding: .5em 1em;
  background: lightseagreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<section ng-app="test">
  <article ng-controller="TestCtrl">
    
    <div ng-blur="sendHttp($event)" tabindex="-1" class="test">
      <input type="text" ng-model="fields.firstname" />
      <input type="text" ng-model="fields.surname" />
    </div>
    
  </article>
</section>

Answer 2

我认为ng-blur在内部实现onfocusout事件，因为div不会触发onfocusout，ng-blur在这种情况下不起作用

你需要听取身体上的click事件并检查目标是否不是div，然后执行某些操作

表格提交或$ http调用ng-blur of div：AngularJS

2 个答案: