因此，我将单击按钮，在输入字段中，光标闪烁。但是问题是，如果我转到另一个选项卡，并且如果我将返回此选项卡，则此时光标不在该位置。我需要再次单击输入字段。
请查看下面的链接，
这里，我有3个标签。我在第三个标签中有输入字段。
如果单击添加新按钮，将打开一个输入字段。
然后我单击第一个或第二个选项卡，然后我将返回相同的第三个选项卡。那时，光标没有闪烁。
angular
.module('myApp', [])
.directive('tabs', function() {
return {
restrict: 'E',
transclude: true,
template: '<ul id="myTab" class="nav nav-tabs">' +
'<li ng-class="{active: activeTab == tab}" ng-repeat="tab in tabs"><a ng-click="setActive(tab)">{{tab}}</a></li>' +
'</ul>' +
'<div class="tab-content" ng-transclude></div>',
controller: function($scope) {
$scope.tabs = [];
$scope.activeTab = '';
$scope.setActive = function(tab) {
$scope.activeTab = tab;
};
this.register = function(tabName) {
$scope.tabs.push(tabName);
if (!$scope.activeTab) {
$scope.setActive(tabName);
}
};
this.isActive = function(tabName) {
return tabName == $scope.activeTab;
};
$scope.myVar = false;
$scope.toggleTeamField = function() {
$scope.myVar = !$scope.myVar;
$scope.focus = !$scope.focus;
};
}
}
}).directive('pane', function() {
return {
restrict: 'E',
require: '^tabs',
template: '<div class="tab-pane" ng-show="isActive(title)" ng-transclude></div>',
transclude: true,
scope: {
title: '@'
},
link: function(scope, element, attrs, tabsController) {
tabsController.register(scope.title);
scope.isActive = function(tabName) {
return tabsController.isActive(tabName);
};
}
};
});<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap-theme.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp">
<tabs>
<pane title="Tab 1">Tab 1 Content</pane>
<pane title="Tab 2">Tab 2 Content</pane>
<pane title="Tab 3">
<input placeholder="Enter your teams name" my-focus="{{focus}}"
ng-model="team_input" ng-show="myVar"
class="team_input" type="text" name="team_input" required/>
<button ng-click="toggleTeamField()">Add New</button>
</pane>
</tabs>
</body>
</html>请帮助我该怎么做？
如果您在输入字段中输入id：
<input
id="team_input"
placeholder="Enter your teams name"
my-focus="{{focus}}"
ng-model="team_input"
ng-show="myVar"
class="team_input"
type="text"
name="team_input"
required
/>
您可以将其自动聚焦在标签更改上，如下所示：
link: function(scope, element, attrs, tabsController) {
tabsController.register(scope.title);
scope.isActive = function (tabName) {
document.getElementById("team_input").focus();
return tabsController.isActive(tabName);
};
}