如何根据用户当前所在的页面在我的web应用程序的右侧栏上动态添加数据？

Question

我用angular.js开发了一个web应用程序。我的问题是，我在左侧边栏上的菜单保持不变。但是，右侧边栏上的数据会根据用户当前所在的页面而变化。如果用户在主页上，那么右侧边栏将显示，例如，"data 1“。如果用户在分析页面上，那么右侧边栏将显示一个图表。我不知道如何使用angular以最优化的方式实现这一点。

任何形式的帮助都是非常感谢的。

提前感谢

Answer 1

您必须实现angular路由：

将html元素作为容器保留(在右侧栏内)，并提供ng-view指令和模板。您必须在单独的文件夹中创建不同的html模板，这些模板将按照menu

• .config()呈现，您可以在其中写下特定的逻辑，以便将每个状态/模板and关联到特定的控制器和模板

。

Answer 2

您应该看看ngInclude指令。这可能是加载模板(以及相应控制器中的数据)的最佳方式。我

Answer 3

您可以使用ngRoute并为每个页面调用单独的html template和controller，如下所示

angular
.module('myApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
  .when('/', {
    templateUrl: 'home.html',
    controller: ['$scope', function($scope){
      $scope.page = 'Data 1';
    }]
  })
  .when('/analytics', {
    templateUrl: 'analytics.html',
    controller: ['$scope', function($scope){
      $scope.page = 'Show Graph';
    }]
  })
  .otherwise({redirectTo: '/'});
}]);

然后在html中添加ng-view，如下所示

<div class="content">
    <div ng-view></div>
</div>

工作演示plunker