أين تجد الزاوي-إكسيديتابل وأياكس معا العمل مثال بسيط

Question

الآن ، أنا باستخدام الزاوي-إكسيديتابل.أريد إرسال تحرير البيانات إلى الخادم.

<div ng-controller="Ctrl">
        <a href="#" id='username' editable-text="user.name">{{ user.name || "empty" }}</a>
</div>

و رمز جس هو

    <script type="text/javascript">
    var app = angular.module("app", ["xeditable"]);


app.controller('Ctrl', function($scope,$http) {
    $scope.user = {
        name: 'awesome user'
    };  
       $http.post("<?php echo base_url(); ?>index.php/welcome/test", {"name":name})
      .success(function(data, status, headers, config) {
       $scope.data = data; 

      })
   .error(function(data, status, headers, config) {
   $scope.status = status;
});    

});
</script>

تلقيت متغير الاسم هو قيمة فارغة.هذا الرمز لا يعمل.لا يمكنني العثور على خطأ.

Answer 1

تحتاج إلى استدعاء التعليمات البرمجية التي تنشر إلى الخادم على onaftersave الحدث ، الذي تم توثيقه هنا: http://vitalets.github.io/angular-xeditable/#onaftersave

يتم استدعاء هذا الحدث بعد تعيين التغييرات في صندوق الإدخال على النموذج.

في هتمل الخاص بك وضع استدعاء وظيفة في onaftersave سمة مثل هذا:

<div ng-controller="Ctrl">
        <a href="#" id='username' onaftersave='postName()' editable-text="user.name">{{ user.name || "empty" }}</a>
</div>

في وحدة التحكم الخاصة بك ، قم بإنشاء وظيفة اسم البريد التي تنشر البيانات بالفعل على الخادم.سوف التعليمات البرمجية تبدو مثل هذا:

<script type="text/javascript">
    var app = angular.module("app", ["xeditable"]);


    app.controller('Ctrl', function ($scope, $http) {
        $scope.user = {
            name: 'awesome user'
        };

        // Called on the onaftersave event of xeditable
        $scope.postName = function () {
            $http.post("<?php echo base_url(); ?>index.php/welcome/test", {"name": $scope.user.name})
                    .success(function (data, status, headers, config) {
                        $scope.data = data;

                    })
                    .error(function (data, status, headers, config) {
                        $scope.status = status;
                    });
        }
    });
</script>