Угловое скрытие элемента при размытии

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

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

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/