ng-blur 未在内联编辑中设置 true/false 值

Question

如果通过触发 ng-blur 在输入文本框外单击，我试图在内联编辑中将视图设置为只读视图（修改前的值）。但没有按预期工作。

尝试了我的代码here

<ul ng-init="showInput=false">
    <li ng-repeat="todo in todos">
      <span ng-show="!showInput" ng-click="showInput=!showInput">{{todo.title}}</span>
      <span><input ng-show="showInput"  ng-model="todo.title" ng-blur="showInput=true"></span>
    </li>
    </ul>

Answer 1

我已经尝试了一个 plunker，根据我对你的问题的假设检查它，如果错误请详细说明你的问题

添加了模糊函数

    $scope.blurFunc = function(){
    $scope.showInput = true;
  }

plunkr

Answer 2

问题

您的代码无法正常工作，因为当您单击 span 时，span 会隐藏，输入会显示，但不会获得焦点。因此，当您单击输入的 "outside" 时，ngBlur 永远不会触发（输入永远不会获得焦点）。检查这个点击跨度并再次点击输入。输入已获得焦点，当您在外部单击时，将触发 ngBlur。

解决方案 1（最佳）

对您的跨度使用指令。单击 span 时，此指令确实专注于输入。无需对您的代码进行更多修改，但您需要一些有关指令的知识。

解决方案 2（很差，但不需要指令）

显示带有两个布尔变量的输入。如果鼠标悬停 span/input，则为真。另一个在您单击时为真，在触发 ngBlur 时为假。当然你需要这样的思考 <input ng-show="mouseOver || showInput">.

ng-blur 未在内联编辑中设置 true/false 值

ng-blur not setting true/false value in inline edit

javascript

blur

angularjs

angularjs-ng-repeat

问题

解决方案 1（最佳）

解决方案 2（很差，但不需要指令）