How to update dynamically fromLinkable etc?

Hi there,

I am using GoJS with angular. I have a directive for my diagram and it works fine.
I want though to make my diagram enabled and disabled for edit links betwween shapes with a switch button.
So i’ve got something like this in my directive:

scope.isEditable = true;

            // Update if when tab if opened
            scope.$on('editRelatisons', function (value, state) {
                if(state === 'true') {
                    scope.isEditable = true;
                } else {
                    scope.isEditable = false;
                }
                console.log(scope.isEditable);

            });

And in my diagram something like this:

//define a shape that holds the body
                            $GO(go.Shape, "RoundedRectangle", {
                                portId: "",
                                fromLinkable: scope.isEditable,
                                toLinkable: scope.isEditable,
                                fromLinkableSelfNode: false,
                                toLinkableSelfNode: false,
                                fromLinkableDuplicates: false,
                                toLinkableDuplicates: false,

I’m broadcasting the status to false or true correctly but it make no impact on my diagram. Links keeps the initial scope’s state.

Any idea?

Thanks

In your JavaScript call to $GO, scope.isEditable was evaluated and returned a boolean. That is the only information that $GO received, so there is nothing to re-evaluate at some future time. Maybe you could establish a data binding, but I think there is a better alternative.

If you want to enable or disable user linking for the whole diagram it is more natural to modify the diagram instead of modifying every single node and/or link. Just set http://gojs.net/latest/api/symbols/Diagram.html#allowLink. Maybe you also want to set Diagram.allowRelink as well.

Could you provide me an example if possible? I read about it but i haven’t managed to make it work.
How will i change it for example within my directive from an outside controller?

Can’t you just watch something in your scope and have it set the Diagram.allowLink and Diagram.allowRelink properties?

Or in your ‘editRelatisons’ event handler modify the Diagram properties?

Yes that’s what i was doing with the scope also but anything i update it doesn’t update the diagram also for some reason :/

But at this @walter i do use all angular musts to make it work.
I just can’t make it work.
So simple to have a button to make the diagram editable or disabled for editing.
Any ideas?

Well, in simple HTML, I would just do something like:

  <button onclick="myDiagram.allowLink = !myDiagram.allowLink">Toggle Linking</button>

Can you add something to your controller to execute this?

Nope it wont. Well i do have to remind you that is an angular app. I think just with HTML i would not be able to make it happen :/

Well i did it finally. That’s the way:

I’m broadcasting from controller to alter the directive like that:

In DOM:

<button ng-click="editRelations()">Enable edit</button>

In controller:

$scope.editRelations = function(){
     $scope.$broadcast('editRelations');
};

In directive:

scope.$on('editRelations', function () {
     diagram.allowLink = !diagram.allowLink;
});

Thanks