Angularjs and kendo ui

Question

0.00/5 (No votes)

See more:

I am trying to get navigation of kendo ui to work with angular js. The problem is that whenever i set ng-app navigation stops working. So if i leave <body> it works but when i use <body ng-app="myApp"> it stops working.

HTML

<body>
        <!--Home-->
    <div id="Search"
        data-role="view"
        data-title="Search">
        <div class="view-content">
            <ul data-role="listview" data-style="inset">
                <li><a href="#Surname" data-transition="slide:left">Surname</a></li>
                <li><a href="#">First Name</a></li>
                <li><a href="#">AM</a></li>
                <li><a href="#">Country</a></li>
                <li><a href="#">City</a></li>
                <li><a href="#">Home Phone</a></li>
                <li><a href="#">Work Phone</a></li>
                <li><a href="#">Mobile</a></li>
                <li><a href="#">Date of birth</a></li>        
            </ul>
        </div>
    </div>

<div id="Surname"
        data-role="view"
        data-title="Surname">
        <div class="view-content" >
            <form class="form-search"> 
                <div class="input-append">
                    <div class="input-group">
                        <span class="input-group-addon"></span>
                        <input type="text" ng-model="search" class="form-control" placeholder="Surname">
                    </div>
                </div>
                <ul data-role="listview" data-style="inset" ng-controller="myApp.controllers.GetPatients">
                    <li ng-repeat="value in categories | filter:search"><a  ng-click="SetId(value.Id)" href="#Details" data-transition="slide:left" >{{value.Value}}</a></li> 
                </ul>       
            </form>
        </div>
        <div style="border-removed1px solid #6FC3FF;padding:5px;"></div>
            <button class="btn btn-info" type="button" style="margin-top:10px;" href="#">Add New Patient</button>
        </div>

<div id="Details"
        data-role="view"
        data-title="Details">
        <div class="view-content">
            <div ng-controller="myApp.controllers.GetPatients" ng-repeat="info in patient">
                <span>ID:<input type="text" name="ID" class="form-control" readonly="true" value="{{info.Id}}" />
                <span>Name:<input type="text" name="First_Name" class="form-control" readonly="true" value="{{info.Value}}" /></span>
                <span>Created</span><input type="text" name="CreatedAt" class="form-control" readonly="true" value="{{info.CreatedAt}}" /></span>
            </div>
        </div>
        </div>

<div data-role="layout" data-id="tabstrip-layout">

        <!--Header-->
        <div data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </div>

        <!--Footer-->
        <div data-role="footer">
            <div data-role="tabstrip">
                <a href="#Search" transition="slide:right" data-icon="home">Home</a>
                <a href="#Options" data-icon="contacts">Login</a>
                <a href="#Location" data-icon="search">Location</a>
                <a href="#View" data-icon="globe">Weather</a>
            </div>
        </div>
    </div>

The above navigation goes from surname to search to details of selected customer. When the app starts if i press search navigation stops working. If i remove it navigation works but angular doesn't I'm using kendo-ui,angularjs,typescript.

Posted 12-Nov-13 3:11am

mangalord

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Angularjs and kendo ui

Add your solution here

Preview 0

Angularjs and kendo ui

Add your solution here

Preview 0

Existing Members

...or Join us