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 (<a href="http://lanet.local/sec1/Scripts/angular.js:355:19" rel="nofollow">http://lanet.local/sec1/Scripts/angular.js:355:19</a>)
    at copy (<a href="http://lanet.local/sec1/Scripts/angular.js:541:11" rel="nofollow">http://lanet.local/sec1/Scripts/angular.js:541:11</a>)
    at copy (<a href="http://lanet.local/sec1/Scripts/angular.js:563:28" rel="nofollow">http://lanet.local/sec1/Scripts/angular.js:563:28</a>)
    at copy (<a href="http://lanet.local/sec1/Scripts/angular.js:546:23" rel="nofollow">http://lanet.local/sec1/Scripts/angular.js:546:23</a>)
    at copy (<a href="http://lanet.local/sec1/Scripts/angular.js:563:28" rel="nofollow">http://lanet.local/sec1/Scripts/angular.js:563:28</a>)
    at copy (<a href="http://lanet.local/sec1/Scripts/angular.js:546:23" rel="nofollow">http://lanet.local/sec1/Scripts/angular.js:546:23</a>)
    at copy (<a href="http://lanet.local/sec1/Scripts/angular.js:563:28" rel="nofollow">http://lanet.local/sec1/Scripts/angular.js:563:28</a>)
    at copy (<a href="http://lanet.local/sec1/Scripts/angular.js:546:23" rel="nofollow">http://lanet.local/sec1/Scripts/angular.js:546:23</a>)
    at copy (<a href="http://lanet.local/sec1/Scripts/angular.js:563:28" rel="nofollow">http://lanet.local/sec1/Scripts/angular.js:563:28</a>)
    at copy (<a href="http://lanet.local/sec1/Scripts/angular.js:546:23" rel="nofollow">http://lanet.local/sec1/Scripts/angular.js:546:23</a>) angular.js:5582
Error: 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
    at Error (<anonymous>)
    at Object.Scope.$digest (<a href="http://lanet.local/sec1/Scripts/angular.js:7756:19" rel="nofollow">http://lanet.local/sec1/Scripts/angular.js:7756:19</a>)
    at Object.Scope.$apply (<a href="http://lanet.local/sec1/Scripts/angular.js:7926:24" rel="nofollow">http://lanet.local/sec1/Scripts/angular.js:7926:24</a>)
    at <a href="http://lanet.local/sec1/Scripts/angular.js:930:13" rel="nofollow">http://lanet.local/sec1/Scripts/angular.js:930:13</a>
    at Object.invoke (<a href="http://lanet.local/sec1/Scripts/angular.js:2802:25" rel="nofollow">http://lanet.local/sec1/Scripts/angular.js:2802:25</a>)
    at bootstrap (<a href="http://lanet.local/sec1/Scripts/angular.js:928:12" rel="nofollow">http://lanet.local/sec1/Scripts/angular.js:928:12</a>)
    at angularInit (<a href="http://lanet.local/sec1/Scripts/angular.js:904:5" rel="nofollow">http://lanet.local/sec1/Scripts/angular.js:904:5</a>)
    at HTMLDocument.<anonymous> (<a href="http://lanet.local/sec1/Scripts/angular.js:14527:5" rel="nofollow">http://lanet.local/sec1/Scripts/angular.js:14527:5</a>)
    at c (<a href="http://code.jquery.com/jquery-1.9.1.min.js:3:7857" rel="nofollow">http://code.jquery.com/jquery-1.9.1.min.js:3:7857</a>)
    at Object.p.fireWith [as resolveWith] (<a href="http://code.jquery.com/jquery-1.9.1.min.js:3:8658" rel="nofollow">http://code.jquery.com/jquery-1.9.1.min.js:3:8658</a>) 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 572 days ago.

You must be logged in to reply to this topic.