我对AngularJS相当新。
我试图绑定一个对象到一个textarea。
HTML：
<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"
}
}
结果：
如何显示JSON字符串化(然后再将其另存为对象)？
我刚刚研究了我相信是最“正确”的方式这样做，因为我需要它为我的
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>
