Use an ng-if if the content is editable. Angular.js

Question

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

I have an accordion. And I am using in each one the option of:

contenteditable=true

What I want to do, if the accordion has the property "contenteditable" assigned in true, then the ng-click executes the function:

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

The previous line, inhibits that the accordion is open.

If contenteditable is false, then have the normal behavior. And the chord can be opened by clicking. I do not know how to accommodate this, in sight, to adjust the ng-if to my need.

<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>

thank you.

note: In the version of bootstrap that I have in the project, when clicking on the title of the accordion, the page is reloaded. I solved this by removing the "href" attribute from it, directly in the bootstrap library. In the github I put the modified bootstrap.js link, I do not know how to publish it or consume it from this page.

szmeti · Accepted Answer · 2017-02-15 23:12:38Z

2

You can create a click handler in the controller:

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

answered Feb 15, 2017 at 23:12

szmeti

2661 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Naner · Accepted Answer · 2017-02-15 23:13:40Z

0

Alternatively you could:

Add a editable property to your list:

$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}
    ];

And then check on ng-click, something like:

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

answered Feb 15, 2017 at 23:13

Naner

1,3026 gold badges27 silver badges43 bronze badges

Comments

brhardwick · Accepted Answer · 2017-02-16 14:30:26Z

0

you might be able to use a directive for this.

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);
    }
}
}
);

Then, you could simply write the line like this:

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

try the fiddle: http://jsfiddle.net/brhardwick/n42cwvj9/2/

edited Feb 16, 2017 at 14:30

answered Feb 15, 2017 at 23:17

brhardwick

3,0852 gold badges17 silver badges17 bronze badges

Collectives™ on Stack Overflow

Use an ng-if if the content is editable. Angular.js

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related