Question

使用AngularJS，是否可以显示来自外部JS数据文件的动态内容，而无需为视图加载单独的模板HTML文件？我正在尝试使用单个HTML文件，并根据URL查询参数动态填充JS数据文件中的内容。

例如：

website.com/index.html?product=product01
website.com/index.html?product=product02
website.com/index.html?product=product03

我无法为此找到解决方案。任何帮助表示赞赏。

Answer 1

请检查＆＃34; UI Bootstrap＆＃34;的来源。指令集合，所有模板都在JS文件中声明，并在模块加载时存储在模板缓存中。 http://angular-ui.github.io/bootstrap/

打开＆＃34; ui-bootstrap-tpls.js＆＃34;文件，查找＆＃34;模板/ timepicker＆＃34;例如，在它里面的字符串。

Answer 2

您可以使用角度ui路由器依赖关系来解决与状态相关的问题。

通过

包含脚本来注入此模块

 angular.module("myApp", ['ui.router']);

然后在app的配置中，根据查询参数返回不同的控制器。请注意具有“？”

的网址

  angular.module("myApp")
  .config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
   function($stateProvider, $urlRouterProvider, $locationProvider) {
      $stateProvider
        .state('index.html', {
      url: "/index.html?product"
      controller: function ($stateParams) {
       //get corresponding controller
       var ctrlName = $stateParams.type + "Product";
       //product1 , product2 etc.
       return ctrlName;
      }
    })
 }]);

如何使用基于URL参数的JS内容包含单个HTML文件

2 个答案: