Question

我使用Angular JS编写了以下代码。当我点击标题页面时，我试图让标签打开网址。请帮忙。

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

Answer 1

你走了：

变更是：

使用iframe html标记加载网页（位于标签页中）
使用$sce service在iframe中使用网页的源网址

＆GT;

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

选项卡以角度js打开URL链接

1 个答案: