Using X-editable within UI.Bootstrap tab-heading directive in AngularJs

Question

I have a AngularJs App where we use UI.Bootstrap Tabs to create and delete workspaces.
I'm wanting to use X-editable to edit the name of the workspace/tab but within the tab-header directive:

<tab-heading>
    <span editable-text="item.title">{{item.title}}</span>
</tab-heading>

As it is, it comes up with an inline edit on-click, but does not update the scope on save.

Heres' the fiddle: http://jsfiddle.net/RDfTu/

I have the same problem. I submitted an issue for this since no one else seems to know a solution. — mdewitt
– mdewitt, Commented Apr 4, 2014 at 1:17

bluehallu · Accepted Answer · 2014-04-04 12:33:39Z

2

If you look at the generated html:

<tabset class="ng-isolate-scope ng-scope">

Isolated scopes don't inherit from any scope, so your "item.title" doesn't exist in this scope nor on any scope below it, where your tab headers are, and where x-editable is creating it's controller.

answered Apr 4, 2014 at 12:33

bluehallu

10.3k9 gold badges47 silver badges64 bronze badges

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

2 Comments

mdewitt Over a year ago

Okay that makes sense. Is there any work around for that issue that doesn't involve changing code from any of the third party libraries (like angular)?

bluehallu Over a year ago

I'm not sure, but it doesn't look like there will be one to me.

Hussein Al-Far · Accepted Answer · 2015-03-17 13:52:52Z

0

I had the same issue and in my case i was able to solve it using blur attribute :

<tab-heading>
   <span editable-text="tab.name" onbeforesave="validate($data)" buttons="no" blur="submit">{{ tab.name}}</span>
 </tab-heading>

Please see the documentation.

Also please see the below code in xeditable.js:

if (shown[i]._blur === 'submit') {
        toSubmit.push(shown[i]);
      }

answered Mar 17, 2015 at 13:52

Hussein Al-Far

7192 gold badges8 silver badges15 bronze badges

Collectives™ on Stack Overflow

Using X-editable within UI.Bootstrap tab-heading directive in AngularJs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related