0
新しいボタンを押してタブを作成する以下のangularjsコードがあります。しかし、新しく作成されたタブは作成後に有効にならず選択もされません。最後のものの前のものは常にアクティブになります！ 何が間違っているか分かりますか？Angularjs：動的に作成されたタブがアクティブ/選択されない
plnkr：https://plnkr.co/edit/1329tgGonObRQ6Drk75A?p=preview
HTML：
<!doctype html>
<html ng-app="plunker">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="TabsParentController">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
Sure to delete?
</ul>
Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
<uib-tabset active="active">
<uib-tab ng-repeat="workspace in workspaces"
heading="{{workspace.name}}"
>
<div ng-controller="TabsChildController">
<div>
{{$parent.workspace.id}} : {{ $parent.workspace.name}}
</div>
<input type="text" ng-model="workspace.name"/>
<button class="btn" type="button" ng-click="open('sm',workspace)">Delete</button>
</div>
</uib-tab>
<uib-tab index="0" select="addWorkspace()">
<uib-tab-heading>
<i class="glyphicon glyphicon-plus"></i>
</uib-tab-heading>
</uib-tab>
</uib-tabset>
</div>
</body>
</html>
Javascriptを：
var app = angular.module('plunker', ['ngAnimate','ui.bootstrap']);
app.controller("TabsParentController", function ($scope,$uibModal) {
$scope.animationsEnabled = true;
$scope.open = function (size, workspace) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: 'ModalInstanceCtrl',
size: size,
resolve: {
workspace: function() {
return workspace;
}
}
});
modalInstance.result.then(function (selectedItem) {
var index=$scope.workspaces.indexOf(selectedItem)
$scope.workspaces.splice(index,1);
}, function() {
$log.info('Modal dismissed at: ' + new Date());
});
};
var setAllInactive = function() {
//angular.forEach($scope.workspaces, function(workspace) {
// workspace.active = false;
// });
};
var addNewWorkspace = function() {
var id = $scope.workspaces.length+1 ;
$scope.workspaces.push({
id: id,
name: "Workspace " + id,
});
$scope.active=$scope.workspaces.length -1;
};
$scope.workspaces =
[
];
$scope.addWorkspace = function() {
setAllInactive();
addNewWorkspace();
};
$scope.remove=function(item){
var index=$scope.workspaces.indexOf(item)
$scope.workspaces.splice(index,1);
}
});
angular.module('plunker').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, workspace) {
$scope.selectedworkspace = workspace;
$scope.ok = function() {
$uibModalInstance.close($scope.selectedworkspace);
};
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
});
app.controller ("TabsChildController", function($scope, $log){
});
として$タイムアウトを注入することを忘れないでくださいどのようにこの 'UIB-タブセットがアクティブ= "アクティブ"'動作しますか？これはディレクティブのようですが、あなたのコードでディレクティブの定義を見つけることはできません。 –
@ emil.cそのangularjsブートストラップタグ：//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js – user3033921
それではどうしますか？ –