angularjs每次刷新内容都是append而不是更新内容到组件

Question

父页面中的Dialog页面，每次都需要实时的拿取数据，当在浏览器端修改ID，
然后加载页面，组件数据每次都是append而不是覆盖掉原来的数据。
例如：www.xxx.com?id=1，点开Dialog页面
显示为：《div》
《 input name="id" value="1" 》
《input name="name" value="壹"》
《/div》
只修改id=2,然后加载页面。在点开Dialog页面
正常该显示：《div》
《input name="id" value="2"》
《input name="name" value="贰"》
《/div》
结果却显示为：
《div》
《input name="id" value="1"》
《input name="name" value="壹"》
《/div》
《div》
《input name="id" value="2"》
《input name="name" value="贰"》
《/div》
每次都会APPEND,而不是刷新，
function (id) {
var delay = $q.defer();
$http.post(appconfig.apiBaseUrl + 'order/Get?id=' + id)
.success(function (data) {
delay.resolve(data);
}).error(function () {
delay.reject("Can't search data.");
});
return delay.promise;
}
如何避免append到body?

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

要解决这个问题，你需要确保在$scope.$apply()或$digest()之后调用ngAfterViewInit()或者ngOnChanges()等事件钩子函数，这样AngularJS才能更新DOM元素的内容。

以下是一个示例，展示了如何使用ngAfterViewInit()和ngOnChanges()来处理数据绑定：

<div ng-app="myApp" ng-controller="MyCtrl">
  <p>{{myData}}</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="app.js"></script>

function MyCtrl($scope) {
  $scope.myData = "initial value";
}

function app() {
  angular.module('myApp', [])
    .controller('MyCtrl', MyCtrl);
}

在这个例子中，我们创建了一个名为MyCtrl的控制器，并将其传递给Angular应用。在MyCtrl中，我们设置了初始值myData为"initial value"。在app.js文件中，我们定义了app()函数，它初始化Angular应用并挂载我们的控制器。

现在，当你改变myData时，AngularJS会自动更新DOM元素的内容。