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

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #13414

    jcamorgan
    Member

    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
    #13435

    Ashish Jindal
    Moderator

    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

    #13444

    jcamorgan
    Member

    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!

    #13445

    jcamorgan
    Member

    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
    #13456

    C1_NodirT
    Member

    Try this

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

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

    #13457

    C1_NodirT
    Member

    Answer

    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.

    #13465

    jcamorgan
    Member

    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.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.