Question

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

指令如下

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

}）;

非常感谢任何帮助，

enter image description here

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

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

<强>的js

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

  };
});

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

2 个答案: