Question

我将myCtrl成员mydata绑定到DOM，如下所示

<div id="{{myCtrl.mydata}}">I'll change if my id changes</div>

mydata是异步获取的。

$http.get('/mydata.json').success(function (data) {
    myCtrl.mydata = data;
    var mydiv=document.getElementById(data);    // this don't work 'coz the change -
    if(mydiv){                                  // is not yet reflected in DOM   
         mydiv.innerHTML="my new id is "+data;
    }
});

如何在myCtrl.mydata中反映出来后触发一个函数。我只需要一个DOM ready事件来挂钩。

Answer 1

您需要注意模型的变化，这是检测变化的最佳方法：

$scope.$watch('mydata', function(newVal, oldVal) {
    if (newVal !== oldVal) {
        // mydata changed...
    }
});

Answer 2

将您的代码更改为：

$http.get('/mydata.json').success(function (data) {
    $scope.mydata = data;
});

和你的HTML

<div id="mydiv">{{mydata}}</div>

您放入$scope.mydata的任何内容都会反映在div

中

Answer 3

不要在控制器中操纵html，而应该简单地与数据交互。数据绑定将为您更改html。

$http.get('/mydata.json').success(function (data) {
    if (data === "changed") {
        myCtrl.mydata = "rechanged";
    } else {
        myCtrl.mydata = data;
    }
});

如果您发现自己试图直接以角度与html交互，请先尝试避免它，如果您不能使用指令。

Answer 4

似乎有一种Angular的做法。它在这里讨论。 https://github.com/angular/angular.js/issues/734

非输入元素的ng-change

4 个答案: