Angular tab is not working in template calling through routes

Question

I am trying to run the tab in a template, included through ng-view using routes. Unfortunately, when I click on template, it is not working. Please help me to solve the problem. Here is the code:

Index.html

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script></head> 

     <script src="app.js"></script>
  </head>

  <body ng-controller="application">
    <header><a href="#/template1">Template 1</a><br /><a href="#/template2">Template 2</a></header>

    <div ng-view="templateUrl"></div>
  </body>
  </html>

Template1.html

I am template 1

Template2.html

<div role="presentation" class="text-center" ng-repeat="listitem in patient_tab"> 
 <a href="javascript:void(0)" ng-click="tabClick(clickTab)"> 
    <i class="{{ listitem.patientTab_icon }}" aria-hidden="true"></i> <br />
    {{ listitem.patientTab_name }} 
 </a> 
</div>
<ng-include src="patient_template"></ng-include>

 I am template 2

ptemplate1.html

 I am ptemplate 1

ptemplate2.html

<h2>Patient template 2</h2>

app.js

var medicalapp = angular.module('app', ['ngRoute']);

medicalapp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.

    when('/template1', {
       templateUrl: 'template1.html',
       controller: 'template_controller1'
    }).
    when('/template2', {
       templateUrl: 'template2.html',
       controller: 'template_controller2'
    }). 
    otherwise({
       redirectTo: '/template1'
    });
 }]);

 medicalapp.controller('application', function($scope){


 });

  medicalapp.controller('template_controller2', function($scope){

    $scope.patient_tab= [
        {
            patientTab_name: 'ptemplate1',
            url: 'patient_template1.html',
            patientTab_icon: 'fa fa-area-chart'
        },
        {
            patientTab_name: 'ptemplate2',
            url: 'patient_template1.html',
            patientTab_icon: 'fa fa-file-text'
        },

     ];

     $scope.patient_template = 'patient_template1.html';

     $scope.tabClick= function(tab){

        $scope.patient_template = tab.url;
     }

 });

Answer 1

thanks Guys.. For help. Answer are:-

Template2.html

<div role="presentation" class="text-center" ng-repeat="listitem in patient_tab"> 
 <a href="javascript:void(0)" ng-click="tabClick(listitem)"> 
    <i class="{{ listitem.patientTab_icon }}" aria-hidden="true"></i> <br />
    {{ listitem.patientTab_name }} 
 </a> 
</div>

app.js

var medicalapp = angular.module('app', ['ngRoute']);

medicalapp.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider.

    when('/template1', {
       templateUrl: 'template1.html',
       controller: 'template_controller1'
    }).
    when('/template2', {
       templateUrl: 'template2.html',
       controller: 'template_controller2'
    }). 
    otherwise({
       redirectTo: '/template1'
    });
 }]);

 medicalapp.controller('application', function($scope){


 });

  medicalapp.controller('template_controller2', function($scope){

    $scope.patient_tab= [
        {
            patientTab_name: 'ptemplate1',
            url: 'patient_template1.html',
            patientTab_icon: 'fa fa-area-chart'
        },
        {
            patientTab_name: 'ptemplate2',
            url: 'patient_template1.html',
            patientTab_icon: 'fa fa-file-text'
        },

     ];

     $scope.patient_template = 'patient_template1.html';

     $scope.tabClick= function(listitem ){

        $scope.patient_template = listitem.url;
     }

 });

The name or string ng-click="tabClick(listitem)"> ie listitem should be same for

 $scope.tabClick= function(listitem ){

        $scope.patient_template = listitem.url;
     }

Angular tab is not working in template calling through routes

Question

1 answers

solution1
0 ACCPTED 2016-07-10 14:34:40

Angular tab is not working in template calling through routes

Question

1 answers

solution1 0 ACCPTED 2016-07-10 14:34:40

solution1
0 ACCPTED 2016-07-10 14:34:40