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

Angular选项卡在通过路由调用模板时不起作用

1 个答案: