Please HELP!!!

[mikemazzParticipant]

I’m struggling with getting a simple AngularJS directive ng-repaat to work in my jqxTab. For some reason when inside of the <jxq-splitter> I have not access to the $scope. If I put a template reference like {{ users[0].login }} just above the <jqx-splitter> it works fine.

I really like jqxwidgets and angular but I’m totally frustrated with this integration.

<jqx-splitter jqx-settings="userSplitterSettings">
        <div id="userList">
            {{ totalUsers }}
            <div style="margin-left: 20px; margin-right: 20px; margin-bottom: 10px;">
                <jqx-grid jqx-instance="userGrid" jqx-create="createWidget" jqx-settings="gridSettings" jqx-orientation="horizontal"></jqx-grid>
            </div>
        </div>
        <div id="userInfo">
            <jqx-tabs jqx-data="users" jqx-create="createWidget" jqx-width="'100%'" jqx-height="'100%'" jqx-animation-type="'fade'" jqx-selection-tracker="'true'">
                <ul>
                    <li style="margin-left: 30px;">A</li>
                    <li>B</li>
                    <li>C</li>
                    <li>D</li>
                    <li>E</li>
                    <li ng-repeat="user in data">{{ user.login }}</li>
                </ul>
                <div>
                    {{totalUsers}}
                    <div ng-repeat="user in data" style="margin: 15px;">
                       <div style="margin-bottom: 10px;">
                           User Id: {{ user.userId }}
                       </div>
                        <div style="float: left; width: 15%;">
                            <div class='jqx-rc-all' style='margin: 10px;'></div>
                            <div style='margin-top: 10px;'>
                                <img height="60" width="60" src="images/users/unknown.jpg">
                            </div>
                        </div>
                        <div style="float: left; width: 45%;">
                            <div style='margin: 10px;'>Login: </div>
                            <div style='margin: 10px;'>Name:</div>
                            <div style='margin: 10px;'>E-mail: </div>
                            <div style='margin: 10px;'>Phone: </div>
                        </div>
                        
                   </div>
                    
                </div>
                <div>
                    
                </div>
                <div>
                    
                </div>
                <div>
                    
                </div>
                <div>
                    
                </div>       
            </jqx-tabs>   
        </div>
    </jqx-splitter>

[Peter StoevKeymaster]

Hello Mike,

Each Directive has its own Isolated scope. That should answer why your code will not work in that way. If you want to bind inner to outer scope members, you will have to use jqx-data attribute.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[mikemazzParticipant]

Peter,

I am using the jqx-data attribute in the above example. It seems to work until I tried to do it within the jqx-tab. Any other ideas?

[Peter StoevKeymaster]

Hi mikemazz,

You’re using the data attribute but you tried to bind it to something which is in different scope. Your jqxTabs directive is in the jqxSplitter directive i.e you can bind the jqxTabs to jqxSplitter’s data and you can bind the jqxSplitter’s data to the outer scope.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[mikemazzParticipant]

Peter,

How do I bind an inner element data to an outer scope? I don’t see any documentation on it.

Thanks
– Mike

[Peter StoevKeymaster]

Hi mikemazz,

Through the “jqx-data” attribute. I am sure you know about Isolted Scopes. Each directive has isolated scope. When you put a directive inside a directive, the outer scope for the inner directive will be isolated scope, too. That’s how you should pass data up and down through the hierarchy, through the jqx-data attribute and inside the directive you refer to it with “data.xxx”.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[bobmazzoParticipant]

Mike,
Have you found any docs on the jqx-data directive ? I only find one minor example under the “button” example here: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/index.htm?%28arctic%29#demos/jqxangular/button.htm

[mikemazzParticipant]

No, I have not found examples. However, Peter has been helping. The key is to understand that these special angular jqwidgets use isolated scope which can be kind of tricky to understand. I was able to get much stuff working but the fact is I don’t have a lot of experience with isolated scope and it trips me up.

[Author]

Posts