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

用到了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.