Question

https://plnkr.co/edit/7QscOzRc8mji7IwhccpZ?p=preview

我有手风琴。我在每个人中都使用了以下选项：

contenteditable=true

我想做什么，如果手风琴的属性“contenteditable”指定为true，则ng-click执行该功能：

ng-click="$event.stopPropagation();"

前一行禁止手风琴打开。

如果contenteditable为false，则表示正常行为。并且可以通过单击打开和弦。我不知道如何根据需要调整ng-if。

<uib-accordion close-others="true">
 <div ng-repeat="faq in faqs">
      <div uib-accordion-group class="panel-default" is-open="faq.open">
          <uib-accordion-heading >
              <span contenteditable="true" data-directive ng-model='faq.pregunta' href="#" ng-click="$event.stopPropagation();">{{faq.pregunta}}</span> <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': faq.open, 'glyphicon-chevron-right': !faq.open}"></i>
          </uib-accordion-heading>
          <span  contenteditable="true" data-directive ng-model="faq.respuesta" ondrop='return false;'>{{faq.respuesta}}</span>
      </div>
  </div>
 </uib-accordion>

谢谢。

请注意：在我在项目中的bootstrap版本中，当单击手风琴的标题时，页面将被重新加载。我通过直接在引导程序库中删除它的“href”属性来解决这个问题。在github中我放了修改后的bootstrap.js链接，我不知道如何发布它或从这个页面中使用它。

Answer 1

您可以在控制器中创建一个点击处理程序：

$scope.click = function($event) {
   if ($event.target.getAttribute('contenteditable') === 'true') {
      $event.stopPropagation();
   }
}

Answer 2

或者你可以：

将可编辑属性添加到列表中：

$scope.faqs=[
        {"pregunta": "pregunta1", "respuesta": "respuesta1", "open": true, "editable": true },
        {"pregunta": "pregunta2", "respuesta": "respuesta2", "open": false, "editable": false},
        {"pregunta": "pregunta3", "respuesta": "respuesta3", "open": false, "editable": true}
    ];

然后检查ng-click，例如：

<button ng-click="faq.editable ? $event.stopPropagation() : whatever()"></button>

Answer 3

您可能可以使用指令。

app.directive('contentEditable', function($parse) {
return {
restrict: 'A',
link: function(scope, elem, attrs) {
    if(typeof attrs.contentEditable =="undefined" || attrs.iscontenteditable != "true")
        return;

    var fn = $parse(attrs.contentEditable);
    elem.bind("click",fn);
    }
}
}
);

然后，你可以简单地写下这样的一行：

<span  iscontenteditable="true" content-editable="$event.stopPropagation();" data-directive ng-model="faq.respuesta" ondr

尝试小提琴：http://jsfiddle.net/brhardwick/n42cwvj9/2/

如果内容可编辑，请使用ng-if。 Angular.js

3 个答案: