AngularJS：textarea绑定到JSON对象显示“object-object”

<textarea rows="5" cols="10" ng-model="menuItem.preset"></textarea>

{
    "kind": "title","label": "ADD_TITLE","iconSrc": "textTitle.png","experimentInclude": "","experimentExclude": "three","preset": {
        "compType": "richTitle","styleId": "txtNew"
    }
}

我刚刚研究了我相信是最“正确”的方式这样做，因为我需要它为我的 https://github.com/vorburger/MUI.js …所以 here is a Plonker与我的解决方案。它基于&本质上是一个特殊情况(即应用程序)相关的Q How to do two-way filtering in angular.js?附加的扭曲是模型更新也应该改变文本框..这是$ watch / $ setViewValue / $ render事情。

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

app.directive('jsonText',function() {
  return {
    restrict: 'A',// only activate on element attribute
    require: 'ngModel',// get a hold of NgModelController
    link: function(scope,element,attrs,ngModelCtrl) {

      var lastValid;

      // push() if faster than unshift(),and avail. in IE8 and earlier (unshift isn't)
      ngModelCtrl.$parsers.push(fromUser);
      ngModelCtrl.$formatters.push(toUser);

      // clear any invalid changes on blur
      element.bind('blur',function() {
        element.val(toUser(scope.$eval(attrs.ngModel)));
      });

      // $watch(attrs.ngModel) wouldn't work if this directive created a new scope;
      // see http://stackoverflow.com/questions/14693052/watch-ngmodel-from-inside-directive-using-isolate-scope how to do it then
      scope.$watch(attrs.ngModel,function(newValue,oldValue) {
        lastValid = lastValid || newValue;

        if (newValue != oldValue) {
          ngModelCtrl.$setViewValue(toUser(newValue));

          // TODO avoid this causing the focus of the input to be lost..
          ngModelCtrl.$render();
        }
      },true); // MUST use objectEquality (true) here,for some reason..

      function fromUser(text) {
        // Beware: trim() is not available in old browsers
        if (!text || text.trim() === '') {
          return {};
        } else {
          try {
            lastValid = angular.fromJson(text);
            ngModelCtrl.$setValidity('invalidJson',true);
          } catch (e) {
            ngModelCtrl.$setValidity('invalidJson',false);
          }
          return lastValid;
        }
      }

      function toUser(object) {
        // better than JSON.stringify(),because it formats + filters $$hashKey etc.
        return angular.toJson(object,true);
      }
    }
  };
});


app.controller('Ctrl',['$scope',function($scope) {
    $scope.model = {};
    $scope.model.data = {
      "kind": "title","styleId": "txtNew"
      }
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div ng-app="app" class="container">
  <div ng-controller="Ctrl" class="row">
    <textarea json-text ng-model='model.data' rows="15"></textarea>
    <p>{{ model.data }}</p>
  </div>
</div>