Javascript angularJS+；jQuery表插件一起工作

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

所以我写了这样的东西， 但我不知道如何获取绑定到列表中对象的对象

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

---

你为什么要使用绝地表插件？这个插件似乎只在jQuery中重复了您单独使用ng模型在angular中已经可以做的事情，并且不需要任何插件

如果您只想创建可以像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>

---

你为什么要使用绝地表插件？这个插件似乎只在jQuery中重复了您单独使用ng模型在angular中已经可以做的事情，并且不需要任何插件

如果您只想创建可以像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.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”现在将为您提供对指令内项目的引用。

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

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

这将使用ngModel更新回模型。（所以不要忘记元素上的ng模型）

---

这将使用ngModel更新回模型。（所以不要忘记元素上的ng模型）

---

谢谢，寻找如何风格的代码…谢谢，寻找如何风格的代码…插件给了我更多，像发送数据到服务器。。。只是为了学习，我的问题更具概念性，我想获得item.name的引用，所以经过一些操作后，我可以更新它，我不知道如何将数据发送到服务器也是您应该做的事情。简单的事实是，如果可以的话，你不应该在angular应用程序中直接用jQuery编辑dom。这个插件给了我更多，比如将数据发送到服务器。。。只是为了学习，我的问题更具概念性，我想获得item.name的引用，所以经过一些操作后，我可以更新它，我不知道如何将数据发送到服务器也是您应该做的事情。简单的事实是，如果可以的话，您不应该在angular应用程序中使用jQuery直接编辑dom。我曾经尝试过，但现在列表生成不正确，请看，哦，我忘记了JSFIDLE。我手头没有，但您需要将属性item='item'添加到重复元素中。编辑我确实试过了，但是现在，列表没有正确生成，请看，哦，我忘记了JSFIDLE。我手头没有，但您需要将属性item='item'添加到重复元素中。编辑