Когда я нажимаю кнопку, в поле ввода курсор мигает. Но проблема в том, что если я go перейду на другую вкладку и вернусь к этой вкладке, то курсор не будет в этом положении. Мне нужно снова щелкнуть поле ввода.
- После перехода на другую вкладку также, если я вернусь, поле ввода должно начать мигать.
Пожалуйста, посмотрите на ниже ссылка,
jsfiddle
Здесь у меня есть 3 вкладки. У меня есть поле ввода на 3-й вкладке.
Если я нажму кнопку Добавить новую, откроется одно поле ввода.
Затем я нажму 1-я или 2-я вкладка, и я вернусь к той же 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>
Пожалуйста, помогите мне, как я могу это сделать?