我知道之前有过类似的问题:
根据屏幕分辨率AngularJS更改指令的templateUrl
这是一年前首次提出的问题,从那以后AngularJS发生了一些变化.我很想知道是否有其他方法可以实现类似的东西,因为我没有找到关于templateUrl交换的许多信息,所以也许我在这里咆哮错误的树.
我有一个没有任何路线的单页应用程序.
HTML:
<body ng-app="App">
// lots of html same for both desktop/mobile
<my-dir></my-dir>
// even more here
</body>
模板1:
<p>Mobile</p>
模板2:
<p>Desktop</p>
我想在屏幕低于700px时渲染模板1,否则渲染模板2.模板改变了my-dir指令中的内容.例如,模板1呈现列表和模板2呈现表.
另一个要求是尽可能使其响应(在调整窗口大小时,模板会发生变化)
目前我可以使用上述问题的解决方案,但有没有其他方法可以做到这一点？
在你的控制器中:
$scope.includeDesktopTemplate = false;
$scope.includeMobileTemplate = false;
var screenWidth = $window.innerWidth;
if (screenWidth < 700){
$scope.includeMobileTemplate = true;
}else{
$scope.includeDesktopTemplate = true;
}
html模板:
<body ng-app="App">
<p ng-if="includeMobileTemplate">Mobile</p>
<p ng-if="includeDesktopTemplate">Desktop</p>
</body>
希望能帮助到你