angularJS + jQuery jeditable plugin work together

Question

I am trying to write a directive for the jeditable plugin so when it changes the value, it will change also edit the model of the edited element.

So i wrote something like that, JS Fiddle but i don`t know how to get the object that bound to the object in the list.

JS:

var app = angular.module("app", []);

app.controller('ctrl', function ($scope) {
    $scope.lst = [{
        id: 1,
        name: "item1"
    }, {
        id: 1,
        name: "item1"
    }, {
        id: 2,
        name: "item2"
    }, {
        id: 3,
        name: "item3"
    }, {
        id: 3,
        name: "item3"
    }];
});

app.directive('uiEditable', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.editable("/echo/json/", {
                onblur: 'submit',
                onsubmit: function (response, settings) {
                    //here i need to update the model
                }
            });
        }
    };
});

thank you, looked for how to style the code...

CaTz
– CaTz

2013-10-04 12:38:39 +00:00
Commented Oct 4, 2013 at 12:38 — CaTz
– CaTz, Commented Oct 4, 2013 at 12:38

hex · Accepted Answer · 2013-12-20 04:09:43Z

3

This uses ngModel to update back to the model. (so don't forget ng-model on element)

app.directive('uiEditable', function () {
    return {
        restrict: 'A',
        require: '?ngModel',
        link: function (scope, element, attrs, ngModel) {
            if (!ngModel) return; // do nothing if no ng-model

            element.editable(function (val) {
                var tVal = $.trim(val);
                if (ngModel.$viewValue !== tVal)
                     scope.$apply(function () { return ngModel.$setViewValue(tVal); });
                return tVal;
            });
        }
    };
});

answered Dec 20, 2013 at 4:09

hex

7831 gold badge12 silver badges17 bronze badges

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

Comments

Mike Driver · Accepted Answer · 2013-10-04 15:31:45Z

2

Why are you using the jeditable plugin? This plugin seems to only duplicate in jQuery what you could already do in angular using ng-model alone and no plugin required.

If you just want to create text which can be edited in place like jEditable does, instead of creating a custom directive simply using ng-submit, ng-click, ng-hide and ng-model. Here's a rough example.

The view:

<form ng-submit="submit()">
  <div ng-hide="showEdit"
       ng-click="showEdit = true">
       {{foo.bar}}
  </div>
  <div>
    <input  type="text"
            ng-show="showEdit"
            ng-model="foo.bar" />
  </div>
  <a href="#" ng-show="showEdit" 
              ng-click="submit();">done</a>
</form>

And the controller:

app.controller('myCtrl', function($scope) {

  $scope.foo = {
    bar: 'some text'
  };

  $scope.showEdit = false;

  $scope.submit = function() {
    // hide the edit field
    $scope.showEdit = false;
    // submit form
    console.log('submit form');
  }

});

answered Oct 4, 2013 at 15:31

Mike Driver

8,5113 gold badges38 silver badges37 bronze badges

2 Comments

CaTz Over a year ago

the plugin gives me much more, like sending the data to the server... just for learning, my problem is more conceptual, i wanna get referance to the item.name, so after some manipulation i will can update it, and i dont know how to to that

Mike Driver Over a year ago

Sending data to the server is something you should be doing in angular too. Simple fact is that you shouldn't really be trying to edit the dom directly with jQuery in an angular app if you can help it.

B Cotter · Accepted Answer · 2013-10-04 16:28:05Z

-1

Pass your item in in an isolated scope:

app.directive('uiEditable', function(){
    return {
        restrict: 'A',
        scope: {
            item: '='
        },
        link: function(scope, element, attrs){
            element.editable("/echo/json/", {
                onblur: 'submit',
                onsubmit: function(response, settings){
                    alert(scope.item);
                }
            });
        }
    };
});

'scope.item' will now give you a reference to the item inside your directive.

answered Oct 4, 2013 at 16:28

B Cotter

9515 silver badges7 bronze badges

2 Comments

CaTz Over a year ago

i did tried that but now, the the list is not generates properly, look at that, jsfiddle.net/HrKVk

B Cotter Over a year ago

Oops I forgot the jsfiddle. I don't have it to hand, but you need to add the attribute item='item' to your repeating element. Edit jsfiddle.net/HrKVk/2

Collectives™ on Stack Overflow

angularJS + jQuery jeditable plugin work together

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related