Question

我有以下代码，我想在选项卡中呈现我的部分文件。

在我的service.html

中

<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
    <script src="app.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="TabsDemoCtrl">


  <tabset>
    <tab heading="Justified"><div ng-include src="sunday.html"></div></tab>
    <tab heading="SJ"><div ng-include src="monday.html"></div></tab>
    <tab heading="Long Justified">Long Labeled Justified content</tab>
  </tabset>
</div>
  </body>
</html>

在我的app.js中我有以下代码

angular
  .module('letsSchedulecommyApp', [
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ui.bootstrap',
    'ui.calendar',
    'ngSanitize',
    'ui.router'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/cleaning_services/homepage.html',
        controller: 'CleaningServicesCtrl'
      })
      .when('/maid-cleaners', {
        templateUrl: 'views/cleaning_services/maid_cleaning_service.html',
        controller: 'CleaningServicesCtrl'
      })
      .otherwise({
        redirectTo: '/'
      });

  });

这是我的plunkr文件http://plnkr.co/edit/PgXGQFe8mDJ1lDkpEqrx

所以基本上，我想点击选项卡，然后查看渲染的部分文件。

任何帮助表示感谢。

Answer 1

ng-include src应位于'单引号中，添加ng-view以获取页面上的视角$ routing视图。

<强> HTML

<div ng-controller="TabsDemoCtrl">
  <tabset>
    <tab heading="Justified"><div ng-include src="'sunday.html'"></div></tab>
    <tab heading="SJ"><div ng-include src="'monday.html'"></div></tab>
    <tab heading="Long Justified">Long Labeled Justified content</tab>
  </tabset>
  <div ng-view>
  </div>
</div>

渲染部分文件AngularJS

1 个答案: