Tabs open url links in angular js

Question

I have the following code written using Angular JS. I am trying to get the tabs to open urls when I click on the tab header. Please help.

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

Chandan · Accepted Answer · 2014-03-31T06:30:39.587

Here you go:

Changes are:

Use iframe html tag to load webpage (that is in your tab)
Use $sce service for using source URL of webpage in iframe

>

<!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>

Edit 1 (To change the url of main page on tab click. I'm still not sure why someone will change url of main page after click operation on tab title. Hope you've some good reason for that):

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

Sorry I need to load the page in the parent, when the user clicks on a given tab. — Vinay Joseph, Mar 31 '14 at 04:12
Let me confirm if i understood you correctly. You want to open google or cnn whenever user clicks on tab. The new page should open in same browser that means your HTML webpage containing your-tab will be replaced by google/cnn webpage. Is that correct? — Chandan, Mar 31 '14 at 04:29
correct. Also please note that the entire code snippet is sitting in an iframe itself. I should have mentioned this before. Apologies. — Vinay Joseph, Mar 31 '14 at 04:51
In that case, http://stackoverflow.com/questions/3420004/access-parent-url-from-iframe could be helpful. — Chandan, Mar 31 '14 at 06:07
For some reason the text on the tabs show {{tab.title}} rather than the actual title. Any idea ? — Vinay Joseph, Mar 31 '14 at 23:18

Tabs open url links in angular js

1 Answers1