앵귤러 - xeditable 및 ajax를 함께 찾을 곳 간단한 예제

Question

이제는 Angular-Xeditable을 사용하고 있습니다. I 편집 데이터를 서버로 보내려면

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

.

및 JS 코드는

입니다.

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

.

I variable은 빈 값입니다. 이 코드는 작동하지 않습니다. 오류를 찾을 수 없습니다.

Answer 1

여기에 문서화 된 onaftersave 이벤트에서 서버에 게시하는 코드를 호출해야합니다. http://vitalets.github.io/angular-xeditable/#onaftersave

이 이벤트는 InputBox의 변경 사항이 모델에 설정된 후에 호출됩니다.

HTML의 함수 호출을 다음과 같이 onaftersave 속성에 넣습니다.

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

.

컨트롤러에서는 실제로 데이터를 서버에 게시하는 PostName 함수를 만듭니다.코드는 다음과 같습니다.

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

.