AngularJS中ng-include随屏幕宽度改变实例

最新推荐文章于 2020-12-20 03:40:07 发布

原创最新推荐文章于 2020-12-20 03:40:07 发布 · 3.1k 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

193 篇文章

订阅专栏

AngularJS

51 篇文章

订阅专栏

本文详细介绍了如何在Angular应用中利用matchmedia-ng插件检测设备屏幕尺寸，并根据不同尺寸调整布局和加载不同模板。通过实例演示了如何在控制器中监听屏幕尺寸变化并动态更新视图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用到了matchmedia-ng这个插件（https://github.com/AnalogJ/matchmedia-ng），参考了http://analogj.github.io/matchmedia-ng/的源代码。

html文件：

 <div>
            <div id="locationdiv" ng-include="location.url">
            </div>
</div>

controller中：

$scope.location = {}
matchmedia.onLandscape(function(mediaQueryList){
		if(mediaQueryList.matches){
			$scope.location.url = "templates/WidePriview.html";
		}
	});
	matchmedia.onPortrait(function(mediaQueryList){
		if(mediaQueryList.matches){
			$scope.location.url = "templates/NarrowPriview.html";
		}
	});

定义$scope.location = {} 是参考了这个http://stackoverflow.com/questions/19045125/angularjs-nginclude-dynamically-changing-its-location

上面那个地址里提供了解释为什么要这么做，大意就是没有点，就是纯复制变量，后续的变化不会反映在拷贝上；有了点，就是引用object，就可以反映后续变化。

I think this needs a short explanation. This has actually to do with how JavaScript will copy things. Without the dot, we are referencing a scalar variable. If JavaScript makes a copy of that, it is just that, a copy. Any changes made to the copy will not reflect on the original. On the other hand: If there is a dot, then the "copy" is not of a scalar variable but an object (tpl in the answer). And a object is "copied" by reference, thus the copied tpl will still point to the original object, thus tpl.whatever will change tpl.whatever on the "original" as well.