Angularjs: Dynamisch erzeugte Registerkarte wird nicht aktiv/ausgewählt

Ich habe den unten stehenden angularjs-Code, der durch Drücken der neuen Schaltfläche Registerkarten erstellt. Die neu erstellte Registerkarte wird jedoch nach der Erstellung nicht aktiviert oder ausgewählt. Immer der eine vor dem letzten wird aktiv! Wer weiß, was los ist?Angularjs: Dynamisch erzeugte Registerkarte wird nicht aktiv/ausgewählt

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){ 

});

Quelle

2016-03-22 user3033921

Wie funktioniert das 'UIB-tabset aktiv = "aktiv"' Arbeit zu injizieren? Es scheint wie eine Direktive, aber ich kann anscheinend keine Direktive in Ihrem Code finden. –

@ emil.c sein angularjs Bootstrap-Tag, importiert von: //angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.5.js – user3033921

Wie funktioniert es? –

Wenn Sie auf die neueste Register als aktive möchten, werden Sie die

$scope.active = $scope.workspaces.length;

einstellen

aber das andere Problem ist, dass wenn Sie einen neuen Arbeitsbereich schieben. Es dauert ein wenig, bis die Direktive das DOM erneut rendert und alle Scope-Variablen bereithält. Wenn Sie also versuchen, die neueste Registerkarte als aktiv zuzuweisen, führt dies zu einem Fehler.

Also, um meinen Punkt schnell zu beweisen (nicht die korrekte Weise), versuchen Sie dies und Ihr Code wird funktionieren. Denken Sie daran, $ timeout als Abhängigkeit

app.controller("TabsParentController", 
    function ($scope,$uibModal, $timeout) { 


     .... 
     .... 

     $scope.workspaces.push({ 
      id: id, 
      name: "Workspace " + id, 
     }); 

     //introduce a 50 ms delay before setting the active tab 
     $timeout(function(){ 
      $scope.active = $scope.workspaces.length; 
     }, 50); 

     .... 
     .... 

    } 
);

see it in plunker

Quelle

2016-03-22 19:46:42

Danke für die Antwort, ja, Sie haben Recht. Gibt es eine Möglichkeit, eine Funktion zu erstellen, die die aktive Registerkarte nach dem erfolgreichen Abschluss der AddNewTab-Funktion setzt? Ich suche nach etwas ähnlichem get.then oder get oder erfolg, der nach erfolgreichem abschluss eine funktion aufrufen kann! Gibt es so etwas für Funktionen? – user3033921

@ user3033921 wenn ich zuerst auf Ihr Problem schaute. Ich hatte genau die gleiche Frage wie emily.c. Wenn Sie warten können, bis die Anweisung bereit ist, dann setzen Sie die aktive, wäre es am idealsten. Für diesen Teil müssen Sie wahrscheinlich die Dokumentation selbst nachschlagen. Meine Antwort war ein Beweis des Konzepts, dass es ein bisschen Aufruhr gibt, auf das man warten muss. Prost –

@jin_in_coding danke für Ihre Hilfe. – user3033921

Angularjs: Dynamisch erzeugte Registerkarte wird nicht aktiv/ausgewählt

Antwort

Verwandte Themen