如何告诉 HTML 不要加载包含一组元素的数据？

问：

这是交易。我正在外部应用程序中构建html表单。问题是我添加的 html 数据越多，事情就越慢，因为它加载了 dom 中的所有 html 数据。

此 HTML 数据使用一个 angularjs 控制器，该控制器发出另一个控制器（主 api），并且还使用来自主 api 的服务和指令。

我的思考过程是从您单击的菜单中创建一个 iframe，并用 ng-if 包围它。问题是在 iframe 中加载的单独 html 页面看不到控制器数据，因此没有一个范围在单独的 html 页面中起作用。

我试图创建一个ng-route，但这似乎也不起作用，因为页面始终是“index.html”，iframes加载在html的正文中。

我尝试使用带有单独页面的 ng-route（如上面的代码所示）和 iframe（如上面的代码所示）。我正在寻找一些关于如何仅在单击按钮时加载 DOM 部分的想法。我的想法是让每个按钮点击写入一个范围，然后只有在该范围等于该值时才加载数据，但我相信这需要在 iframe 本身中完成。

HTML 部分

<div id="centricityEmrController" ng-controller="centricityEmrController" cemr-require-active-sdid>


<div id="top-level gmaController" ng-controller="gmaController"> 


<section>
TESTING TO SEE IF THIS SHOWS UP....
<br>
{{ iframeTest }}
</section>

</div> <!--top-level gmaController-->  
</div> <!--centricityEmrController-->  

有没有人对这里可以做什么有任何想法或想法？

HTML 页面

<div>
  This is a TEST {{message}}
</div>

JS 初始化

var APP_NAME = 'CentricityEmrExampleApp';
// Create the module
var myApp = angular.module(APP_NAME, ['centricityEmr', 'ngMaterial', 'ngMessages', 'ngSanitize', 'ngRoute']);
myApp.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/tabTest', {
    templateUrl: "/tabTest.html",
    controller: "gmaController"
  })
}]);

myApp.config(function(exceptionConfigProvider) {
  exceptionConfigProvider.config.formPrefix = 'HTML GMA LOG';
});

//Hides Possibly unhandled rejection error from clicking in md-selects when another dropdown is still open
myApp.config(['$qProvider', function($qProvider) {
  $qProvider.errorOnUnhandledRejections(false);
}]);
function triggerUpdateTextTranslation() {
  // Get scope where the text translation method to trigger exists
  var scope = angular.element(document.getElementById('textTransScope')).scope();
  if (scope.doTextTranslation) {
    scope.doTextTranslation();
  }
}
function showAlert() {
  alert("Basic Javascript alert!");
}

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// AngularJS Material Colors
myApp.config(function($mdThemingProvider) {
  $mdThemingProvider.theme('default')
    .primaryPalette('cyan', {
      'default': '800',
      'hue-1': '500',
      'hue-2': '600',
      'hue-3': 'A100'
    })
    .accentPalette('cyan', {
      'default': '700'
    });
});

控制器请注意，我删除了控制器下方的几乎所有函数，以使示例更易于理解。

var myApp = angular.module(APP_NAME);

myApp.controller('gmaController', ['$rootScope', '$mdSidenav', '$mdMedia', '$http', '$scope', '$timeout', '$parse', '$compile', '$q', '$window', '$location', 'centricityEmrNativeFactory', 'centricityEmrNotificationFactory', 'centricityEmrWebServicesFactory',
  function($rootScope, $mdSidenav, $mdMedia, $http, $scope, $timeout, $parse, $compile, $q, $window, $location, centricityEmrNativeFactory, centricityEmrNotificationFactory, centricityEmrWebServicesFactory) {
    $rootScope.$emit("centricityEmrController", {});
    $scope.message = "Hello World";
  }
]);