模型:在同一个页面,用ng-include的方式做A、B两个视图切换。在A页面有一个tms-data的指令,通过$sce处理并绑定后台传递过来的数据。
为什么使用$sce?
因为angularJS里好些地方,比如路径默认是个字符串,不会认为是路径,从而访问不到我们需要的东西,那么我们就可以通过$sce告诉angualrJS这个路径,这样是很安全滴。
比如,当处理文件地址时,代码是这样写的:
case 'file':
case 'voice':
repos.forEach(function(oFile) {
if (oFile.url) {
oFile.oUrl = oFile.url;
oFile.url = $sce.trustAsResourceUrl(oFile.url);
}
});
break;
页面的嵌套关系是这样的:
父容器
<body ng-controller="ctrlFather">
<div ng-include="selectedTab"></div>
</body>
A视图
<div class="A"><tms-data repos="repos"></tms-data></div>
B视图
<div class="B" ng-controller="ctrlB">我是B视图</div>
js:
var app = angular.module('demo', []);
app.controller('ctrlFather', ['$scope', '$sce', function($scope, $sce) {
$scope.repos = [{
url: 'http://fanyi.youdao.com/'
}]
}]);
app.controller('ctrlB',['$scope', function($scope){}]);
问题:当首页加载页面完毕后,数据都正常显示;当切换B视图又切回A视图之后,这个链接只是显示了一个‘{}’
分析:当切换视图之后,controller都会重新加载一遍,那么数据就会被watch更新一遍,为什么没有更新?
原因:
1、经历这些逻辑,处理的是外部传递进来的repos;
2、因为A页面的数据就在父Controller中,所以此时的repos就是被处理完成后的repos;
3、被$sce处理过的数据已经变成了一个安全的对象,而不再是原数据的字符串,所以再经历那么处理逻辑,最后还是一个{};
解决:在需要处理的地方,加flag判断逻辑。就是当处理过后,就不再去处理了。