javascript - angular ng-include页面更新问题

问题描述

问 题

//html
<div ng-controller="testCtrl">
    <div ng-include="test.html">{{msg}}</div>
</div>

//test.html
<div>
    <input ng-model="msg"/>
    <button>保存</button>
</div>

//testCtrl
function init(){
    $scope.msg = 'hello';
}

init();//第一次初始化

function someFun(){
    init();
}

现在能显示出test的页面，第一次初始化也正常。但是经过一些操作之后，我要重新初始化，执行someFun的时候，msg的值没有变化，还是world。想请教下ng-include的页面应该如何更新？

解决方案

解决这个问题，你需要先理解/学习以下两个东西：

1. 数据驱动是什么？

2. AngularJS中$scope的继承关系是什么

先来泛谈第一项，为什么用数据驱动的思维来考虑问题？因为AngularJS本身就不是和jquery一样的命令式的工具，所谓数据的双向绑定，就是可以通过数据的变化，从而因为UI改变。所以这里你不需要考虑如何命令ng-include里的test.html刷新，而要从test.html里引用的那些数据着手！

第二项，ng-include实际是会创建一个新的$scope，这个新的$scope继承自testCtrl里的$scope。所以在test.html里直接引用$scope.msg是可以拿到你在testCtrl里定义的数据的。

现在的问题是经过一些操作之后，我要重新初始化，执行someFun的时候，msg的值没有变化，我相信你这里说的没有变化，是指在test.html里的引用没有变化，对吧？

那我做个简单的推测(不一定能解决你的问题)，你是不是在test.html里也有操作会改变msg的值？

这篇关于javascript - angular ng-include页面更新问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！