javascript - 使用 angularjs 路由多个 html 文件

标签 javascript html angularjs

我对所有网络和编码都很陌生,而不仅仅是 Angular 。很抱歉,如果这是显而易见的,我该如何处理大部分都可以使用相同 Controller 的模板?

我的想法是,我可以将 html 文件(我的幻灯片)的文件夹视为数组,并创建两个可以简单地在数组中来回移动的导航按钮。

我尝试实现此目的的方法如下:

.when('/lesson1/slide/:slideCount', {

template : function($routeParams) {

return 'pages/lessons/lessons01/slide' + $routeParams.slideCount + '.html'

},

controller: 'lessonsCtrl'

})

但这只是在我的 ng-view 中显示字符串“pages/lessons/lessons01/slide1.html”,而不是放入该文件中找到的 html。我也尝试过

.config(function ($routeProvider, $routeParams) ...

templateUrl: 'pages/lessons/lessons01/slide' + $routeParams.slideCount + '.html'

这个在每个 .when 处都会给出一个空白的 ng-view,而不仅仅是我试图让我的 html 幻灯片工作的特定 View 。还有另一种可行的方法吗?所有这一切的最终目标是创建一个更具交互性的 Powerpoint 类型演示文稿,我可以将其发布在网络上。希望这是有道理的。

更新:幻灯片上的内容将是几张图像、一些在时间延迟或单击时显示的文本 block 以及一个音频剪辑。最终,我也想在这些幻灯片中添加一种录制和播放音频的方法,但当我到达那里时,我会跨过那座桥。

最佳答案

您只需将函数传递给 templateUrl 而不是字符串:

$routeProvider.when('/lesson1/slide/:slideCount', {
  templateUrl: function($routeParams) {
    return 'pages/lessons/lessons01/slide' + $routeParams.slideCount + '.html';
  },
  // ...
});

关于javascript - 使用 angularjs 路由多个 html 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32055256/

相关文章:

angularjs - postman 不就像浏览器一样吗?

javascript - 我可以使用 Materialise 在 View 中处理多个 .html 吗?

php - 使用 angularjs 使用 where 子句从数据库获取数据

javascript - 如何根据数组长度随机将整数设置为类名?

javascript - .animate() 添加边距

jquery - 如何在自动完成jquery中添加页脚

javascript - 对象在与其他对象发生碰撞之前不会被移除

javascript - 缺少请求的请求 token

javascript - 如何将 stdout 从 NodeJS 实时发送到 AngularJS?

c# - JavaScript 函数在 C# 中返回 bool 值