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

Question

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

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

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

Answer 2

你为什么使用 jeditable 插件？这个插件似乎只在 jQuery 中重复了你已经可以在 Angular 中单独使用 ng-model 并且不需要插件。

如果您只想创建可以像 jEditable 那样就地编辑的文本，而不是简单地使用 ng-submit、ng-click、ng-hide 和 ng-model 创建自定义指令。这是一个粗略的例子。

风景：

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

和控制器：

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

});

Answer 3

在隔离范围内传递您的项目：

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' 现在将为您提供对指令中项目的引用。