从Angular标签页的不同位置调用内容

我有一组标签。我想知道如何从页面的不同部分获得内容时，选项卡被点击。我可以通过调用不同的html页面来做到这一点，但是有一种方法可以显示来自同一页面的内容吗?

   <tabset vertical="false">
            <tab heading="Scenario 1">Test</tab>
            <tab heading="Scenario 2"></tab>
            <tab heading="Dist as of 12/31/15"></tab>
            <tab heading="Custom Label"></tab>
   </tabset>

例如，我如何让场景1的内容显示在场景1的选项卡中。我知道我可以把所有东西都放在标签标记之间，但是有没有别的方法呢?

. js页面

(function () {
'use strict'
var DistributionApp = angular.module('DistributionApp',
['someApp', 'ctracApp.engagement.services', 'ngRoute']);
DistributionApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/Distribution',
    {
        templateUrl: '/app/Something/Distribution/Distribution.html',
        controller: 'distributionCtrl',
        controllerAs: 'minimumDist'
    });
}]);

DistributionApp.controller('distributionCtrl', ['$location', '$sce', function ($location, $sce) {
    var self = this;
    $scope.setActive = function(current){
        $scope.active = current;
    };
    $scope.amIActive(id)
    {
        if ($scope.active == id)
        {
            return true;
        }
        else
        {
            return false;
        }
    };
    }]);
 });

USING ROUTE PROVIDER

使用这种方法，你将使用angular模块应用，注入ngRoute，这样你就可以操纵请求。在index.html文件中，你可以用ng-view来改变div id，所以你也可以用ngRoute来改变ng-view的代码。

在你的Tabset上，我已经添加了一些链接到场景/:id，所以我可以使用id动态地在$routeProvider中找到相应的html。

index . html

<html ng-app='app'>
  <body>
    <tabset vertical="false" ng-controller='tabController'>
        <tab a href='#/scenario/1' heading="Scenario 1" ></tab>
        <tab a href='#/scenario/2' heading="Scenario 2"></tab>
        <tab a href='#/scenario/3' heading="Dist as of 12/31/15"></tab>
        <tab a href='#/scenario/4' heading="Custom Label"></tab>
    </tabset>
    <div ng-view>
    </div>
  </body>
    <script src="angular.js">
    <script src="angular-route.js">
    <script src='app.js'>
</html>

scenario1.html

<div>
  This is scenario 01
</div>

app.js

var app = angular.module('app', [ngRoute]);
app.controller('tabController', function(){});
app.config( function($routeProvider) {
  $routeProvider
    .when('/scenario/:ID',
      {
        controller: 'tabController',
        templateUrl: function($routeParams) {
          return 'scenario' + routeParams.ID + '.html' }
      })
    .otherwise( { template: '<div> Ohh, 404! :D </div> });
});

templateUrl将引导到文件的路径，而模板将直接显示HTML。templareUrl既可以接收路径，也可以接收返回路径的函数。在本例中，我需要访问:ID，它是一个路由参数，所以我需要注入$routeParams依赖项来访问它。

. else方法将引导到默认的404页面。

隐藏和显示同一页面的内容

首先，所有东西都在同一页上。我用的是ng-if，但我也可以用ng-show或ng-hide。通过这三种方法，我们可以根据作用域变量或作用域函数显示或隐藏内容。在something.html中，我调用选项卡上的一个函数来设置活动选项卡，在它下面，我有所有的div，只有在相应的选项卡是活动的时候才会显示。

something.html

    <tabset vertical="false" ng-controller='tabController'>
        <tab ng-click='setActive(1)' heading="Scenario 1" ></tab>
        <tab ng-click='setActive(2)' heading="Scenario 2"></tab>
        <tab ng-click='setActive(3)' heading="Dist as of 12/31/15"></tab>
        <tab ng-click='setActive(4)' heading="Custom Label"></tab>
    </tabset>
    <div ng-if='amIActive(1)' id='Scenario1'>
        This is test content 1
    </div>
    <div ng-if='amIActive(2)' id='Scenario2'>
        This is test content 2
    </div>
    <div ng-if='amIActive(3)' id='Scenario3'>
        This is test content 3
    </div>
    <div ng-if='amIActive(4)' id='Scenario4'>
        This is test content 4
    </div>

app.js

app.controller('tabController', function(){
  $scope.setActive = function(current){
    $scope.active = current;
  };
  $scope.amIActive = function(id) {
    if($scope.active == id){
      return true;
    } else { return false; }
  };
});

相关内容

最新更新

热门标签：