角选项卡在通过路由调用模板中不起作用

Question

我正在尝试在模板中运行选项卡，该模板通过ng-view使用路由来包含。 不幸的是，当我单击模板时，它不起作用。 请帮我解决问题。 这是代码：

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

谢谢你们。 答案是：-

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;
     }

 });

名称或字符串ng-click="tabClick(listitem)">即listitem应该与

 $scope.tabClick= function(listitem ){

        $scope.patient_template = listitem.url;
     }

角选项卡在通过路由调用模板中不起作用

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-07-10 14:34:40

角选项卡在通过路由调用模板中不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-07-10 14:34:40

解决方案1
0 已采纳 2016-07-10 14:34:40