[英]Angular tab is not working in template calling through routes
I am trying to run the tab in a template, included through ng-view
using routes. 我正在尝试在模板中运行选项卡,该模板通过ng-view
使用路由来包含。 Unfortunately, when I click on template, it is not working. 不幸的是,当我单击模板时,它不起作用。 Please help me to solve the problem. 请帮我解决问题。 Here is the code: 这是代码:
Index.html 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 Template1.html
I am template 1
Template2.html 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 ptemplate1.html
I am ptemplate 1
ptemplate2.html ptemplate2.html
<h2>Patient template 2</h2>
app.js 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;
}
});
thanks Guys.. For help. 谢谢你们。 Answer are:- 答案是:-
Template2.html 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 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 名称或字符串ng-click="tabClick(listitem)">
即listitem应该与
$scope.tabClick= function(listitem ){
$scope.patient_template = listitem.url;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.