Question

我在尝试更改$ scope变量后尝试在DOM中执行某些操作，但我遇到了一些麻烦。

以下是代码：

$scope.addThingToDOM = function() {
    $scope.elementList.push({value: "new thing"});
    var elementListDiv = document.getElementById("element-list");
    elementListDiv.scrollTop = elementListDiv.scrollHeight;
};

（elementListDiv包含$ scope.elementList中的元素，我试图在添加新元素时自动向下滚动。通过按钮上的ng-click调用addThingToDom。）

理想情况下，在更改为$ scope.elementList之后，elementListDiv将与$ scope.elementList进行奇偶校验，但似乎并非如此。在我想要弄乱它时，DOM不会更新。它实际上在我更新elementList后调用$ scope。$ apply（）时有效，但是如果我这样做，Angular会给我错误。

有没有办法在应用当前的$ scope更改后调用一些javascript？

Answer 1

不要在控制器中执行DOM操作。当您避免在控制器中执行DOM操作并将其限制为指令时 - Angular会通过摘要周期自动检测并处理对范围的更改。

执行$scope.$apply()工作的事实正是因为它安排了摘要周期。您可以通过将代码置于$timeout内部来使用“更安全”的应用程序，如果需要（仅消除错误），则只会安排摘要，或者您可以编写惯用的Angular并将其放在指令中。

我强烈建议您采用第二种方法，指令中的摘要更简单，并且有关于在线指令的excellenet教程（我推荐egghead.io上的那个）。

Answer 2

你可能可以使用$evalAsync但是，与DOM的直接交互可能应该转向指令。

$scope.addThingToDOM = function() {
    $scope.elementList.push({value: "new thing"});
    $scope.$evalAsync(function() {
        var elementListDiv = document.getElementById("element-list");
        elementListDiv.scrollTop = elementListDiv.scrollHeight;
    });
};

AngularJS - 在应用$ scope后运行一些DOM更新javascript？

2 个答案: