Question

所有

在我的Angular（1.5.9）SPA中，我有一个模型，用户从下拉列表中选择一个元素，并根据它们的选择来渲染元素。这是有效的，但是当用户与渲染元素（输入字段）交互时，角度执行摘要并且元素模糊 - 由于我假设的重新渲染。

这发生在一个bootstrap模式窗口中，奇怪的是我在我的应用程序的另一个发生类似情况的部分没有遇到这个问题。我将提供以下观点。

使用Batarang，我可以看到当我专注于输入时正在发生摘要，但我无法解释为什么。

<div class="btn-group" uib-dropdown>
   <button id="btn-append-to-single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
                        Select Field <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" uib-dropdown-menu>
      <li ng-show="!field.bolIsPrimaryKey" 
          ng-repeat="field in fields()">
         <a href="#" ng-click="displayColumn(field, $event)">     
            {{field.strColumnAlias}}
         </a>
      </li>
   </ul>
</div>
<hr />
<div ng-repeat="field in fields() track by $index">
  <div ng-show="field.visible">
    <!-- free text field -->
    <div ng-if="field.objDataType == 0">
      <input type="text" class="form-control" name="text" ng-model="field.objNewRowValue" required>
    </div>
  </div>
</div>

我发现为了在与输入交互时保持焦点，我需要按住鼠标键然后键入。

更新

我发现我的问题在于将$event传递到我的按钮onclick并在函数内调用$event.preventDefault();。如果我删除了下拉列表，并且只是在视图中显示数组中的每个对象，我就不会遇到这样的问题。我已经包含了以下功能。

$scope.displayColumn = function (col, $event) {
   $event.preventDefault();
    angular.forEach($scope.fields(), function (field) {
        if (field.strColumnName === col.strColumnName) {
            field.visible = true;
        } else {
            field.visible = false;
        };
    });
};

Answer 1

我发现在每个渲染输入上阻止传播可以解决我遇到的问题。但是，我无法解释为什么这可以解决这个问题，但是......

我将此功能添加到我的控制器

$scope.stopProp = function (event){
   event.stopPropagation();
}

对于每个渲染的输入，我修改了我的视图，以便模仿以下

<div ng-if="field.objDataType == 0">
    <label>
        {{field.strColumnAlias}}
    </label>
    <input type="text" ng-click="stopProp($event)" 
                       class="form-control" 
                       name="text" 
                       ng-model="field.objNewRowValue" 
                       placeholder="Please enter a {{field.strColumnAlias}}" 
                       required>
</div>

Angular preventDefault（）导致不必要的模糊/摘要

1 个答案: