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

Question

我有一组标签。 我想知道如何在单击选项卡时从页面的不同部分获取内容。 我可以通过调用不同的 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 的内容显示在场景一的选项卡中。 我知道我可以将所有内容放在选项卡标记之间，但是还有其他方法可以做到这一点。

.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;
        }
    };

    }]);
 });

Answer 1

使用路线提供者

使用这种方法，您将使用 angular 模块应用程序，注入ngRoute以便您可以操作请求。 在 index.html 文件中，您可以使用ng-view更改 div id，因此您可以使用 ngRoute 更改 ng-view 的代码。

在您的 Tabset 上，我添加了一些指向方案/:id 的链接，因此我可以动态地使用该 ID 在 $routeProvider 中查找相应的 html。

索引.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>

场景1.html

<div>
  This is scenario 01
</div>

应用程序.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 依赖项才能访问它。

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

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

首先，一切都在同一页面上。 我正在使用ng-if ，但我也可以使用ng-show或ng-hide 。 有了这三个，我们就可以根据作用域变量或作用域函数来显示或隐藏内容。 在something.html 中，我在选项卡上调用一个函数来设置活动选项卡，在此之下，我拥有所有仅在相应选项卡处于活动状态时才会显示的div。

东西.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>

应用程序.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; }
  };
});

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-09-03 17:52:11

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-09-03 17:52:11

解决方案1
1 已采纳 2015-09-03 17:52:11