Angular - 在选项卡内容中加载 html 页面的最佳方式

Question

我在一个 master.html 页面中有多个选项卡，并且在每个选项卡中加载不同的 tab*.html 页面。在选项卡内容中加载的页面有 angularjs code

现在的问题是当我单独加载 tab*.html 时按预期工作。这里Plunker for single page

但是，当我在选项卡的内容中加载相同的代码时，它不起作用。这里Plunker with tabs

知道如何解决这个问题吗？

Answer 1

我将脚本从 home.html 移到了 index.html 并从 home.html 中删除了 ng-app。

<script>

      app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
      angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope, $window) {
          $scope.tabs = [
              { title:'Home', content:'home content', url:'home.html' },
              { title:'Manage Users', content:'Manage Users content', url:'manageUsers.html'},
              { title:'Manage Configuration', content:'Manage Configuration content', url:'manageConfiguration.html'},
              { title:'Manage Server', content:'Manage Server content' , url:'manageServer.html'},
              { title:'Manage Audit', content:'Manage Audit content', url:'manageAudit.html'},
          ]; 
      });
      app.controller('personCtrl', function($scope) {
        $scope.firstName = "John",
        $scope.lastName = "Doe"
        $scope.myVar = false;
        $scope.toggle = function() {
          $scope.myVar = !$scope.myVar;
          }
      });
  </script>

抱歉我之前的愚蠢回答。

Updated & Working Plunker

Angular - 在选项卡内容中加载 html 页面的最佳方式

Angular - Best way to load html page inside tab's content

javascript

tabs

angularjs

angular-bootstrap