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

Angular tab is not working in template calling through routes

本文关键字：调用 不起作用 路由 选项      更新时间：2023-09-26

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

索引.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>

模板1.html

I am template 1

模板2.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

模板1.html

 I am ptemplate 1

模板2.html

<h2>Patient template 2</h2>

应用.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;
     }
 });

谢谢伙计们..寻求帮助。答案是：-

模板2.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>

应用.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)">即列表项应相同 

 $scope.tabClick= function(listitem ){
        $scope.patient_template = listitem.url;
     }
相关文章：