모서리 블러에 요소를 숨기기

Question

두 개의 단락과 입력 태그가 있습니다. 단락을 클릭하면 입력 내용이 표시되고 단락이 숨겨져 야합니다. 입력이 흐려지면 입력을 숨기고 단락을 표시해야합니다. 나는 이것을 시도했지만 작동하지 않는 이유 데모 아래

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 1

이동 ng-blur 작동하지 않음 :

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

Answer 2

ngBlur 입력 태그와 호환되는, 즉 참조하십시오 input에

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