Can't make requestUpdate() to work within an angularjs directive

GoJS
1

Hello again,

I’m using for my project AngularJS, bootstrap for UI and of course GoJS.

I have an issue when my graphs (which is a directive) is inside a tab (not the first).
If i put the diagram in the first active tab everything works like a charm but if i put it in any other not active tab and push
the tab to open nothing is visible (well it seems that all elements get a width and height of 1px). I am getting no errors in console or anything else strange.

I tried to use so the requestUpdate() function by broadcasting to the directive that the tab is opened like this:
In my controller:

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

In directive:

// Update diagram when tab if opened
                scope.$on('showDiagram', function () {
                    diagram.requestUpdate();
                });

But nothing happens. If i add a console log msg it’s shows the msg but no graph at all. No errors in console no nothing.

Any ideas on this?

Thanks

2

Check the value of diagram – does that correctly evaluate to a go.Diagram object?

3

Yes it does:

var $GO = go.GraphObject.make;
                var diagram =  // create a Diagram for the given HTML DIV element
                    $GO(go.Diagram, element[0], {
                        nodeTemplate: $GO(go.Node, "Auto", {
                                locationSpot: go.Spot.Center
                            },
                            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),

                            //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,

                                width: 300,
                                stroke: defaultColor,
                                fill: "#fff",
                                margin: 0,
                                spot1: new go.Spot(0, 0),
                                spot2: new go.Spot(1, 1)
                            }), etc etc
4

So console.log(diagram instanceof go.Diagram) prints true when called in your scope’s event handler?

Well, if that’s the case, maybe the update that eventually happens after the call to Diagram.requestUpdate is happening too soon, maybe because Angular is causing an HTML reflow later. If so, can you have it be called later?

5

No unfortunately that’s not seems to be the thing. I have set some timeout and still nothing :/

6

Well if i also console log the diagram.requestUpdate() i get undefined msg

7

If you look at the diagram.div, what size is it? Check its style.

We really can’t help very well unless we get more relevant details or we get access to a running sample.

8

My canvas has the style i set for it. Width for ex is 1111px and height 498px.

That happens only if the diagram is not on the first active tab when page is opened.

9

Well i did find a solution.
GoJS with angular is not render inside bootstrap tabs.
So i add angular strap for my app and now it works.
Thanks.

10

Unless we can reproduce the problem, we can only guess. If you don’t want to give us access to your app or give us a simple demonstration example, I don’t know how long it might be before we try to create an example ourselves.

Are you using Angular directives for Bootstrap ?

11

(Our messages crossed.)

I’m glad you figured it out. Could you post what you did so that other people might benefit?

12

Yeap as i said i remove all the native bootstap functionality for tabs (html) and change it with Angular Strap.

13

Ah, so you had not been using Angular directives for Bootstrap ?

14

Yes that’s correct and my bad :P

15

Thanks for bringing up the problem – I learn something new every day.