Question

我有两个元素段和输入标签。当我单击该段落时，输入应显示，段落应隐藏。当输入模糊时，输入应隐藏，段落应显示。我尝试了这个但没有工作

<p ng-click="edit = true" ng-show="!edit">some text</p>
<div ng-show="edit" ng-blur="edit = false">
    <input type=text name="email" ng-blur="blurUpdate()" />
</div>

Answer 1

将ng-blur移至input，请参阅下面的演示

＆＃13;

var app = angular.module('app', []);

app.controller('homeCtrl', function($scope, $timeout) {


  $scope.showEditor = function() {

    $scope.edit = true;

    var textbox = document.getElementById("input_email");

    var tmp = $scope.text
    $scope.text = ""

    $timeout(function() {
      textbox.focus();

      $scope.text = tmp;


    });





  }

  $scope.blurUpdate = function() {


    // add this line 
    $scope.edit = false;


    //your code

  }


});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="homeCtrl" ng-init="text='some text'">
    <p ng-click="showEditor()" ng-show="!edit">{{text}}</p>
    <div ng-show="edit">
      <input type=text name="email" ng-blur="blurUpdate()" ng-model="text" id="input_email" />
    </div>
  </div>

</div>

＆＃13;

Answer 2

ngBlur与输入标签兼容，这就是它无法正常工作的原因：

<p ng-click="edit = true" ng-show="!edit">some text</p>
<div ng-show="edit" >
<input type=text ng-blur="edit = false" name="email" />
</div>

http://jsfiddle.net/xgp2qsww/1/

角度隐藏模糊的元素

2 个答案: