Angular - 在标签内容中加载html页面的最佳方式

时间:2015-06-16 09:52:50

标签: javascript angularjs tabs angular-bootstrap

我在一个master.html页面中有多个标签,并且每个标签中都会加载不同的tab*.html页面。在标签内容中加载的页面为angularjs code

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

但是,当我在标签内容中加载相同的代码时,它无效。这里Plunker with tabs

知道如何解决此问题吗?

1 个答案:

答案 0 :(得分:3)

我将脚本从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