X-editable 和 angularjs 指令，不绑定服务器数据答案

【问题标题】：X-editable and angularjs directive, not binding for server dataX-editable 和 angularjs 指令，不绑定服务器数据
【发布时间】：2015-02-24 00:36:30
【问题描述】：

我正在尝试使用 x-editable 和 angularjs 构建用户输入表单。在进行原型设计时，绑定到静态数据时似乎一切正常。当从服务器获取数据时，控件停止绑定（如随附的屏幕截图所示）我提取了一个提琴手，问题可以在这里重现

http://jsfiddle.net/2p93vy8x/

指令如下

 myApp.directive('xeditable', function($timeout) {
return {
    restrict: 'A',
    require: "ngModel",
    link: function(scope, element, attrs, ngModel) {
            attrs.$observe('pk', function(value){
                var pk = value;
                attrs.$observe('xeditableSource', function(source){
                    if(!source) {source=null; value=null;}
                    else {value=scope.languageIdx;}
                    var loadXeditable = function() {
                        element.editable({
                            display: function(value, srcData) {
                                ngModel.$setViewValue(value);
                                scope.$apply();

                            },
                            mode:'popup',
                            pk: pk,
                            url: scope.url,
                            source:source,
                            value:value
                        });   
                    }; 
                    $timeout(function() {
                        loadXeditable();
                    }, 10);   
                });       
            });
        }    };

});

非常感谢您对此的任何帮助，

【问题讨论】：

对x-editable不是很熟悉，但是除了"display"之外你可能还需要实现"success"方法

标签： angularjs angularjs-directive x-editable

【解决方案1】：

这是因为从服务器获取的数据在你的控件初始化之后才到达，所以它不知道新的值。

要解决这个问题，您需要观察模型更改并更新您的控件：

scope.$watch(attrs.ngModel, function(val) {
  console.log(attrs.ngModel + ' is now', val)
  // I don't know how x-editable works, but you need to update it here.
});

【讨论】：

【解决方案2】：

您可能想尝试 angular-xeditable 模块作为一种更优雅的方法。为了您的方便，我在 plunkr 中设置了一个工作示例here。

HTML

<!DOCTYPE html>
<html ng-app="app">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link data-require="bootstrap@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  <link data-require="xeditable@*" data-semver="0.1.8" rel="stylesheet" href="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js" />

  <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
  <script data-require="xeditable@*" data-semver="0.1.8" src="http://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>

  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script src="app.js"></script>
</head>

<body>

  <div ng-controller="ValidateRemoteCtrl" ng-init="checkName(user.login)">
    <p>
      Editable:
      <a href="#" editable-text="user.login" onbeforesave="checkName($data)">
        {{ user.login}} 
      </a>,
      <a href="#" editable-text="user.id">
        {{ user.id}} 
      </a>
    </p>

    <p>user: {{user.login}}</p>
    <p>id: {{user.id}}</p>
    <p>public repos: {{user.public_repos}}</p>
  </div>

</body>

</html>

var app = angular.module('app', ["xeditable"]);

app.controller('ValidateRemoteCtrl', function($scope, $http, $q) {
  $scope.user = {
    login: 'ariellephan'
  };

  $scope.checkName = function(data) {
    $http.get("https://api.github.com/users/" + data).success(function(res) {
      $scope.user = res;
    }).error(function(e) {
      d.reject('Server error!');
    });

  };
});

【讨论】：