[英]Angular tab is not working in template calling through routes
我正在嘗試在模板中運行選項卡,該模板通過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;
}
});
謝謝你們。 答案是:-
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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.