8

Tôi có các tab khởi động góc theo định dạng sau. (xem plunker)tab khởi động góc - chọn chức năng được gọi trong tải trang

Chức năng chọn được cho là sẽ kích hoạt khi các tab được chọn. Nhưng kỳ lạ, khi trang được tải, chức năng chọn của tab đầu tiên được kích hoạt. (In tab động được chọn Tiêu đề 1 onload ..)

"http://plnkr.co/edit/vyOOhCdIl7s1Wvou7Dr9?p=preview" 

angular.module('ui.bootstrap.demo', ['ui.bootstrap']); 
 
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope) { 
 
    $scope.tabs = [ 
 
    { title:'Dynamic Title 1', content:'Dynamic content 1' }, 
 
    { title:'Dynamic Title 2', content:'Dynamic content 2' }, 
 
    { title:'Dynamic Title 3', content:'Dynamic content 3' } 
 
    ]; 
 
    
 
    $scope.tabSelect = function(title){ 
 
    console.log("tab selected "+title); 
 
    }; 
 

 
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!doctype html> 
 
<html ng-app="ui.bootstrap.demo"> 
 
    <head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script> 
 
    <script src="example.js"></script> 
 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
 
    </head> 
 
    <body> 
 
    <div ng-controller="TabsDemoCtrl"> 
 
     <tabset> 
 
     <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled" select="tabSelect(tab.title)"> 
 
      {{tab.content}} 
 
     </tab> 
 
     </tabset> 
 
    </div> 
 
    </body> 
 
</html>

+3

[ 'select() (Defaults : null): Một biểu thức tùy chọn được gọi là khi tab được kích hoạt'] (https://angular-ui.github.io/bootstrap/#/tabs) vì vậy nó có ý nghĩa, trong khi tải theo tab đầu tiên mặc định được kích hoạt và nó kích hoạt biến cố. – PSL

+0

có cách nào để chúng tôi có thể tránh điều này trong tải trang không? – Sanath

+2

Nhìn qua mã nguồn của angular-ui dường như không có cách nào để xác định điều đó. Tuy nhiên, bạn có thể dễ dàng thực hiện 'var firstTime = true; $ scope.tabSelect = function (title) { if (firstTime) { firstTime = false; trả lại; } console.log ("tab được chọn" + tiêu đề); }; ' – miensol

Trả lời

2

thay đổi lựa chọn của bạn để ng-click như thế này:

<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" ng-click="tabSelect(tab.title)"> 
Các vấn đề liên quan