X-editable和angularjs指令，不綁定服務器數據

我想用x-editable和angularjs構建用戶條目表單。在進行原型設計時，綁定到靜態數據時，一切似乎都沒有問題。控件停止（如附接的屏幕截圖示出）我已提取的提琴手問題可以在這裏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); 
       });  
      }); 
     } };

當數據是從服務器獲取的結合

}）;

任何幫助是極大的讚賞，

enter image description here

來源

2015-02-24 Jyothish

不是真正熟悉的X可編輯的，但是你可能需要實現「成功」的方法中，除了「顯示」 – 2015-02-24 02:21:39

這是因爲從服務器獲取數據到達了一下後你的控制已經初始化之後，所以它不知道的新值。

爲了解決這個問題，你需要觀看模式的轉變和更新控制：

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

來源

2015-02-24 01:15:59 floribon

你可能想嘗試角xeditable模塊作爲一個更優雅的方式

。爲了您的方便，我在plunkr中設置了一個工作示例here。

的Html

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

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

    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script> 
    <script data-require="[email protected]*" 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!'); 
    }); 

    }; 
});

來源

2015-02-24 02:59:13

X-editable和angularjs指令，不綁定服務器數據

回答

相關問題