So I'm trying to update the value of a the text attribute (name) in a cell model without using the inspector, I need this to update both the inspector field and linked cell model value. No idea how to do this. Is it possible?
可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试):
问题:
回答1:
It is a little hard to tell exactly what you mean from your question, plus I don't have a Rappid license so I can't test the UI Inspector part :o( However assuming I understand you properly...
...if you extend the prototype of a shape with a property you can then databind to it in Angular as normal and it automagically updates the shape as you change the property.
I guess this will also update the inspector cell too, but I can't test this because I don't have a Rappid license as I said.
So if you add a name property to a shape like this:
Object.defineProperty(joint.shapes.basic.Rect.prototype, 'name', {
get: function () { return this.attr('text/text'); },
set: function (value) { this.attr('text/text', value); }
});
You can expose the element you want to edit on your controllers scope and bind to it. The HTML:
<div ng-app>
<div ng-controller="MyCtrl">
<div id="paper"/>
<div>
<label>Type here:</label>
<input type="text" ng-model="element.name" />
</div>
</div>
</div>
The controller:
function MyCtrl($scope) {
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 400,
height: 400,
model: graph,
gridSize: 1,
interactive: false
});
var element = new joint.shapes.basic.Rect({
position: {x:100, y:30},
attrs: {text: {text: 'edit my name'}},
size: { height: 92.7051, width: 150}
});
$scope.element = element;
graph.addCell(element);
Object.defineProperty(joint.shapes.basic.Rect.prototype, 'name', {
get: function () { return this.attr('text/text'); },
set: function (value) { this.attr('text/text', value); }
});
}
Working jsfiddle here: http://jsfiddle.net/r7n9t9s6/3/