角：如何將字符串化的json綁定到textarea？

Question

如何將JSON作爲字符串綁定到textarea，以便我可以直接編輯它？

我只希望我的模型在它有效時傳播。

Answer 1

更新：修訂版可用角1.3在http://codepen.io/maxbates/pen/AfEHz

---

我做了一個指令，做到這一點。 如果您有任何建議

Fiddle + Gist

據我知道，我將編輯它，有沒有辦法取消在$解析器管道模型更新（和看ngModelCtrl源似乎驗證這一點）除了添加一個函數哪些錯誤。

請注意，您不直接在textarea上使用ng模型。此解決方案添加了自己的ngModel，綁定到中間對象，並且只會在JSON有效時傳播更改。

'use strict'; 

/* 
example usage: <textarea json-edit="myObject" rows="8" class="form-control"></textarea> 

jsonEditing is a string which we edit in a textarea. we try parsing to JSON with each change. when it is valid, propagate model changes via ngModelCtrl 

use isolate scope to prevent model propagation when invalid - will update manually. cannot replace with template, or will override ngModelCtrl, and not hide behind facade 

will override element type to textarea and add own attribute ngModel tied to jsonEditing 

As far as I know, there is currently no way to achieve this using $parsers (other than one of the function errors and kills the pipeline) 
*/ 

angular.module('myApp') 
    .directive('jsonEdit', function() { 
     return { 
      restrict: 'A', 
      require: 'ngModel', 
      template: '<textarea ng-model="jsonEditing"></textarea>', 
      replace : true, 
      scope: { 
       model: '=jsonEdit' 
      }, 
      link: function (scope, element, attrs, ngModelCtrl) { 

       function setEditing (value) { 
        scope.jsonEditing = angular.copy(JSON2String(value)); 
       } 

       function updateModel (value) { 
        scope.model = string2JSON(value); 
       } 

       function setValid() { 
        ngModelCtrl.$setValidity('json', true); 
       } 

       function setInvalid() { 
        ngModelCtrl.$setValidity('json', false); 
       } 

       function string2JSON(text) { 
        try { 
         return angular.fromJson(text); 
        } catch (err) { 
         setInvalid(); 
         return text; 
        } 
       } 

       function JSON2String(object) { 
        // better than JSON.stringify(), because it formats + filters $$hashKey etc. 
        // NOTE that this will remove all $-prefixed values 
        return angular.toJson(object, true); 
       } 

       function isValidJson(model) { 
        var flag = true; 
        try { 
         angular.fromJson(model); 
        } catch (err) { 
         flag = false; 
        } 
        return flag; 
       } 

       //init 
       setEditing(scope.model); 

       //check for changes going out 
       scope.$watch('jsonEditing', function (newval, oldval) { 
        if (newval != oldval) { 
         if (isValidJson(newval)) { 
          setValid(); 
          updateModel(newval); 
         } else { 
          setInvalid(); 
         } 
        } 
       }, true); 

       //check for changes coming in 
       scope.$watch('model', function (newval, oldval) { 
        if (newval != oldval) { 
         setEditing(newval); 
        } 
       }, true); 

      } 
     }; 
    });