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

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

如果通过触发 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>

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

添加了模糊函数

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

plunkr

问题

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

解决方案 1(最佳)

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

解决方案 2(很差,但不需要指令)

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