angularJS +的jQuery插件jeditable一起工作

我試圖寫的jeditable插件，所以當它改變了價值，這也將改變編輯編輯元素的模型指令。angularJS +的jQuery插件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 
       } 
      }); 
     } 
    }; 
});

來源

2013-10-04 CaTz

謝謝你，找了如何樣式代碼... – CaTz

-1

傳遞您的項目在一個孤立的範圍：

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' 現在給你對指令中的項目的引用。

來源

2013-10-04 16:28:05

我沒有試過，但現在，該名單不正確生成，看看那個，http://jsfiddle.net/HrKVk/ – CaTz

哎呀，我忘了的jsfiddle。我沒有它，但你需要添加屬性item ='item'到你的重複元素。編輯http://jsfiddle.net/HrKVk/2/ –

你試過了嗎？ –

你爲什麼要使用jeditable插件？這個插件似乎只能在jQuery中複製，你可以單獨使用ng-model進行角度轉換，並且不需要插件。

如果你只是想創建它可以就地編輯像jEditable做文本，而不是創建一個自定義的指令，只需使用NG-提交，NG-點擊，NG-隱藏和NG-模型。這是一個粗略的例子。

的觀點：

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

});

來源

2013-10-04 15:31:45

插件給了我更多，比如將數據發送到服務器... 只是爲了學習，我的問題是更多的概念，我想獲得全球化志願服務青年的item.name，所以一些操作後，我將可以更新它，我不知道如何給 – CaTz

將數據發送到服務器是你應該做的事也有角度。簡單的事實是，如果你能夠幫助它，你不應該直接用jQuery在角度應用中直接編輯dom。 –

這使用ngModel更新回模型。（所以不要忘記元素NG-模型）

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

來源

2013-12-20 04:09:43 hex

angularJS +的jQuery插件jeditable一起工作

回答

相關問題