Question

我无法在具有contenteditable属性的div上执行自动建议功能。此外，当我向div发送质量自动完成时，它会显示一条错误消息，例如“元素div上不允许使用质量自动完成”。

以下是我编写的代码。你能为此解决这个问题吗？

$scope.getClients = {
  suggest: suggest_Client
};

<div class="row">
  <div class="col-xs-12">
    <div class="marginTB15" mass-autocomplete>
      <div class="reach_box" contenteditable="true" ng-model="user.communities" mass-autocomplete-item="getNetworks">
        <span class="form-control-feedback form-control-feedback_left_textbox"><img src="images/icon7.png" ></span>
        <div class="reach"></div>
      </div>
    </div>
  </div>
</div>

Answer 1

似乎您错误地使用了mass-autocomplete指令，因此需要<input>标记作为元素。考虑在div中只有2个块 - 一个是普通的自动完成：

<div mass-autocomplete>
  <input ng-model="user.communities" mass-autocomplete-item="getNetworks">
</div>

而另一个是自动完成的静态最终结果 - 比如<div>{{user.communities}}</div>。这两个将通过点击切换为例。通过这种方式，你根本不需要内容可编辑。

所以完整代码可能如下所示：

//controller
$scope.stateEdit = false;
$scope.toggleWidgetState = function(){
  $scope.stateEdit = !$scope.stateEdit;
}
$scope.getClients = {
  suggest: suggest_Client,
  on_select:toggleWidgetState  //here we put our widget back to read-only state
};
//other logic to handle mass-autocomplete

//template
<div class="row">
  <div class="col-xs-12">
  <div mass-autocomplete ng-show="stateEdit">
    <input ng-model="user.communities" mass-autocomplete-item="getNetworks">
 <ul> <li>Cardiologist Connect<button type="button">X</button></li></ul>
      </div>
      <div ng-show="!stateEdit" ng-click="toggleWidgetState()">
      {{getNetworks}}
        <span class="form-control-feedback form-control-feedback_left_textbox"><img src="images/icon7.png" ></span>
        <div class="reach"></div>
        </div>
     </div>
    </div>

自动完成可编辑的divs angular js

1 个答案: