angularjs - Angular 在模糊时隐藏元素

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 请参阅下面的演示

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

  }


});

<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>