WelcomeForumsCommunityWijmo 3Wijgrid will not play with Angular and Breeze together!

Wijmo Team Member
jcamorgan posted on May 23, 2013 at 9:44 am

I am trying to translate the wijgrid / breeze / knockout example into an angular app. Everything is ok up until I try to add the results to the scope.

Please see the attached zip file for my examples:

In the knockout version, we have

postView.refresh();

and

this.products = postView;

This works nicely with knockout.

However, in Angular, setting $scope = postView; sends back some nasty ‘TypeError: Converting circular structure to JSON’ errors.

After a bit of digging I saw that the refresh() function returns a promise so I thought I could set the scope as follows:


        postView.refresh().then(function(data){
            $scope.posts = data.results;
            $scope.$apply();
        }).fail(function(e) {
                alert(e);
        });

No JSON erros this time, but also no data!

This just leaves me with an ‘Should be empty: [] ‘ error in q.js, which is probably the reason for no data. I haven’t managed to find the reason for this yet.

Any ideas?

Attachments:
  1. wijmo_ang.zip
Wijmo Team Member
Ashish Jindal posted on May 24, 2013 at 6:36 am

Hello,

It seems that service which you are using is currently down, hence, I could not view the page. I checked your code and found that your “app” module lacks “wijmo” module dependency. I would suggest you set the same to resolve this issue like this:


angular.module(‘app’, ["wijmo"])

Let me know if it does not help.

Regards

Answer
Wijmo Team Member
jcamorgan posted on May 24, 2013 at 11:00 am

Hi Ashish!

Thanks for the reply. You’re right I missed off the wijmo injection in the demo app I uploaded.

So the answer to my own question is the knockout version: i.e.


postView.refresh();
$scope.products = postView;

Nice one!

Answer
Wijmo Team Member
jcamorgan posted on May 24, 2013 at 11:28 am

So my previous elation was a bit short lived! I get the grid with the data, but am now getting the following errors.


RangeError: Maximum call stack size exceeded
    at isArray (http://lanet.local/sec1/Scripts/angular.js:355:19)
    at copy (http://lanet.local/sec1/Scripts/angular.js:541:11)
    at copy (http://lanet.local/sec1/Scripts/angular.js:563:28)
    at copy (http://lanet.local/sec1/Scripts/angular.js:546:23)
    at copy (http://lanet.local/sec1/Scripts/angular.js:563:28)
    at copy (http://lanet.local/sec1/Scripts/angular.js:546:23)
    at copy (http://lanet.local/sec1/Scripts/angular.js:563:28)
    at copy (http://lanet.local/sec1/Scripts/angular.js:546:23)
    at copy (http://lanet.local/sec1/Scripts/angular.js:563:28)
    at copy (http://lanet.local/sec1/Scripts/angular.js:546:23) angular.js:5582
Error: 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
    at Error ()
    at Object.Scope.$digest (http://lanet.local/sec1/Scripts/angular.js:7756:19)
    at Object.Scope.$apply (http://lanet.local/sec1/Scripts/angular.js:7926:24)
    at http://lanet.local/sec1/Scripts/angular.js:930:13
    at Object.invoke (http://lanet.local/sec1/Scripts/angular.js:2802:25)
    at bootstrap (http://lanet.local/sec1/Scripts/angular.js:928:12)
    at angularInit (http://lanet.local/sec1/Scripts/angular.js:904:5)
    at HTMLDocument. (http://lanet.local/sec1/Scripts/angular.js:14527:5)
    at c (http://code.jquery.com/jquery-1.9.1.min.js:3:7857)
    at Object.p.fireWith [as resolveWith] (http://code.jquery.com/jquery-1.9.1.min.js:3:8658) angular.js:5582
Uncaught Error: 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [] angular.js:7756
XHR finished loading: “http://lanet.local/WordPress2.svc/Posts”. datajs-1.0.3.js:1074
XHR finished loading: “http://lanet.local/WordPress2.svc/Posts?$top=10″.

If I use the following code to add the results to the scope, I get no data back.


        postView.refresh().then(function(data){
            $scope.posts = data.results;
            $scope.$apply();
        }).fail(function(e) {
                alert(e);
        });

I also get this in the console:


XHR finished loading: “http://lanet.local/WordPress2.svc/Posts?$top=10″. datajs-1.0.3.js:1074
Should be empty: []

No metadata?!

I have attached an updated version of the code. The DB is a local php version of WordPress running the php oData producer.

Thanks,
Craig

Attachments:
  1. wijmotest.zip
Answer
Wijmo Team Member
C1_NodirT posted on May 24, 2013 at 7:00 pm

Try this


postView.refresh().then(function() {
    $scope.products = postView.local;
    $scope.$digest();
})

Do not assign $scope.products before data is loaded.

Answer
Wijmo Team Member
C1_NodirT posted on May 24, 2013 at 7:19 pm

AngularJS seems to clone data in $scope, but it works only for simple objects and arrays. The call stack overflow you saw is AngularJS’s unsuccessful attempt to clone a data view. That’s why I put .local property value to the $scope which is a simple array, rather than the data view itself.

Unfortunately, it means that the wijgrid is connected to an array (.local property), not data view, so you do not have server-side paging/sorting/filtering. But grid uses data view internally when bound to an array, so you still have local paging/sorting/filtering.

We will work on better to AngularJS-Breeze integration to address this problematic AngulaJS behavior.

Answer
Wijmo Team Member
jcamorgan posted on May 25, 2013 at 6:05 pm

I should be able to make the server-side sorts etc using breeze so I hope I can work around the issue.

Thanks for the help.

Answer

This topic has 3 voices, contains 6 replies, and was last updated by  jcamorgan 523 days ago.

You must be logged in to reply to this topic.