標籤打開角JS鏈接url鏈接

我有以下使用Angular JS編寫的代碼。我試圖讓我的標籤打開網址，當我點擊標籤標題。請幫忙。標籤打開角JS鏈接url鏈接

<html ng-app="blp_tabs"> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script> 
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script> 
<script>angular.module('blp_tabs', ['ui.bootstrap']); 
    var TabsDemoCtrl = function ($scope) { 
    $scope.tabs = [ 
    { title:"Google", url:"http://www.google.com" }, 
    { title:"CNN", url:"http://www.cnn.com", disabled: false } 
    ]; 

    $scope.navType = 'tabs'; 
    }; 
</script> 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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" select="tab.url" disabled="tab.disabled"> 
    </tab> 
    </tabset> 
</div> 
</body>

來源

2014-03-31 Vinay Joseph

在這裏你去：

的變化是：

使用iframe HTML標記加載網頁（也就是你的標籤）
使用$sceservice使用iframe中網頁的源URL

<!DOCTYPE html> 
<html ng-app="blp_tabs"> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script> 
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script> 
<script> 
    angular.module('blp_tabs', ['ui.bootstrap']); 
    var TabsDemoCtrl = function ($scope, $sce) { 
    $scope.tabs = [ 
    { title:"Google", url:$sce.trustAsResourceUrl("http://www.google.com") }, 
    { title:"CNN", url:$sce.trustAsResourceUrl("http://www.cnn.com"), disabled: false } 
    ]; 

    $scope.navType = 'tabs'; 
    }; 
</script> 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> 
</head> 
<body > 
<div ng-controller="TabsDemoCtrl"> 
    <tabset > 
    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" > 
     <iframe ng-src='{{tab.url}}' style="height:100%; width:100%;"></iframe> 
    </tab> 
    </tabset> 
</div> 
</body>

編輯1（要更改主頁的選項卡上的點擊網址。我仍然不確定爲什麼有人會在標籤標題上點擊操作後更改主頁的網址。希望你一些很好的理由）：

<html ng-app="blp_tabs"> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script> 
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script> 
<script> 
    angular.module('blp_tabs', ['ui.bootstrap']); 
    var TabsDemoCtrl = function ($scope, $sce, $window, $log) { 
    $scope.tabs = [ 
     { title:"Google", url:$sce.trustAsResourceUrl("http://www.google.com") }, 
     { title:"CNN", url:$sce.trustAsResourceUrl("http://www.cnn.com"), disabled: false } 
    ]; 
    $scope.navType = 'tabs'; 
    $scope.open = function(myUrl){ 
     $window.location.href = myUrl; 
    } 
    }; 
</script> 
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> 
</head> 
<body > 
<div ng-controller="TabsDemoCtrl"> 
    <tabset > 
    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" select='open(tab.url)'> 
    </tab> 
    </tabset> 
</div> 
</body>

來源

2014-03-31 03:39:46 Chandan

對不起，我需要在父加載頁面，當給定的選項卡上的用戶點擊。 –

父母？你能否更好地描述它？ – Chandan

我希望頁面在父頁面中打開而不是iframe。 –

標籤打開角JS鏈接url鏈接

回答

相關問題