Show/hide a KineticJS layer loaded from JSON within Angular - json

Question

I am trying to hide a layer in KineticJS that is built from a JSON string. The layer won't hide, however. If I try to hide a shape having an ID in the JSON, it does work. Not sure if I have incorrectly created my layer ID in the JSON, or if KineticJS has issues with layer showing/hiding. There is no console error. The layer just won't hide. KineticJS is version v5.1.1. Help?
Here's the relevant JSON....
{
"attrs": {
"width": 524,
"height": 500
},
"className": "Stage",
"children": [
{
"attrs": {},
"className": "Layer",
"id": "layer1",
"children": [
{
"attrs": {
"draggable": true
},
"className": "Group",
"children": [
{
"attrs": {
"id": "firstShape",
"x": 25,
"y": 25,
"radius": 190,
"fill": "green"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 64,
"y": 120,
"text": "Some label",
"fontSize": 10,
"fontFamily": "Arial",
"fill": "white"
},
"className": "Text"
}
]
}
]
}
]
}
Here's the event handler which does the layer hide... I find that this is getting called correctly, and the layer just isn't hiding.
scope.$on('hideLayer', function(){
scope.kineticStageObj.get('#layer1').hide();
scope.kineticStageObj.draw();
});

Answer 1

Looks like your json is wrong. id of layer should be inside attrs object.
"attrs": {
"id: : "layer1"
},

Answer 2

Try this:
{
"attrs": {
"width": 524,
"height": 500
},
"className": "Stage",
"children": [
{
"attrs": {
"id": "layer1"
},
"className": "Layer",
"children": [
{
"attrs": {
"draggable": true
},
"className": "Group",
"children": [
{
"attrs": {
"id": "firstShape",
"x": 25,
"y": 25,
"radius": 190,
"fill": "green"
},
"className": "Circle"
},
{
"attrs": {
"width": "auto",
"height": "auto",
"x": 64,
"y": 120,
"text": "Some label",
"fontSize": 10,
"fontFamily": "Arial",
"fill": "white"
},
"className": "Text"
}
]
}
]
}
]
}