javascript - angularJS + jQuery jeditable 插件协同工作

Question

我正在尝试为 jeditable 插件编写一个指令，因此当它更改值时，它也会更改编辑已编辑元素的模型。

所以我写了类似的东西，JS Fiddle但我不知道如何获取绑定(bind)到列表中对象的对象。

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

Answer 1

这使用 ngModel 更新回模型。 (所以不要忘记元素上的 ng-model)

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