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

Question

I have a set of tabs.我有一组标签。 I want to know how to get content from a different part of the page when the tab is clicked.我想知道如何在单击选项卡时从页面的不同部分获取内容。 I can do it by calling a different html page, but is there a way to display content from the same page?我可以通过调用不同的 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>

For example, how would I get the content for Scenario1 to display in the tab for scenario one.例如，我如何让场景 1 的内容显示在场景一的选项卡中。 I know I can put everything in-between the tab markup, but is there another way to do it.我知道我可以将所有内容放在选项卡标记之间，但是还有其他方法可以做到这一点。

.js page .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

USING ROUTE PROVIDER使用路线提供者

With this aproach, you will use the angular module app, inject the ngRoute so you can manipulate requests.使用这种方法，您将使用 angular 模块应用程序，注入ngRoute以便您可以操作请求。 In your index.html file, you can change your div id with a ng-view , so you can change the code of the ng-view with your ngRoute.在 index.html 文件中，您可以使用ng-view更改 div id，因此您可以使用 ngRoute 更改 ng-view 的代码。

On your Tabset, I've added some links to scenario/:id, so I can use the ID dinamically to find the corresponding html in the $routeProvider.在您的 Tabset 上，我添加了一些指向方案/:id 的链接，因此我可以动态地使用该 ID 在 $routeProvider 中查找相应的 html。

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

scenario1.html场景1.html

<div>
  This is scenario 01
</div>

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

The templateUrl will guide the path to the file while the template will display direct HTML. templateUrl 将引导文件路径，而模板将显示直接的 HTML。 The templareUrl can receive both a path or a function that return a path. templareUrl 可以接收路径或返回路径的函数。 In this case, I needed acess to the :ID, which is a Route Param, so I needed to inject the $routeParams dependency in order to acess it.在这种情况下，我需要访问 :ID，它是一个路由参数，所以我需要注入 $routeParams 依赖项才能访问它。

The .otherwise method will guide to the a default 404 page. .otherwise 方法将引导到默认的 404 页面。

HIDING AND SHOWING CONTENT FROM THE SAME PAGE隐藏和显示同一页面的内容

First, everything is on the same page.首先，一切都在同一页面上。 I'm using ng-if , but I could use ng-show or ng-hide too.我正在使用ng-if ，但我也可以使用ng-show或ng-hide 。 With these three, we can display or hide content based on a scope variable or scope function.有了这三个，我们就可以根据作用域变量或作用域函数来显示或隐藏内容。 In something.html, I'm calling a function on the tabs to set the active tab and, below that, I have all the divs that will only display if the corresponding tab is active.在something.html 中，我在选项卡上调用一个函数来设置活动选项卡，在此之下，我拥有所有仅在相应选项卡处于活动状态时才会显示的div。

something.html东西.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应用程序.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