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

score 3 · Accepted Answer

これは 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;
            });
        }
    };
});

score 2 · Accepted Answer

なぜ jeditable プラグインを使用しているのですか? このプラグインは、Angular で ng-model のみを使用してプラグインを必要とせずに既に実行できることを jQuery で複製するだけのようです。

ng-submit、ng-click、ng-hide、ng-model を使用してカスタムディレクティブを作成する代わりに、jEditable のようにその場で編集できるテキストを作成したいだけの場合。これが大まかな例です。

景色：

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

});

score -1 · Accepted Answer

分離されたスコープでアイテムを渡します。

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」は、ディレクティブ内のアイテムへの参照を提供します。

javascript - angularJS + jQuery jeditable プラグインは連携して動作します

3 に答える 3

Related

Reference