angularjs - 当 Angular js 完成从服务器检索数据（并更新 dom）时，如何运行自定义 js 函数？

Question

我在控制器中有以下代码：

ViewCtrl.resolve = {
    /**
     * Fetching a user model from the backend to make it available to this controller.
     */
    user: ['$http', 'symfony2Router', function($http, symfony2Router) {
        return $http.get(symfony2Router.path('getUser')).then(function(response) {
            return response.data;
        });
    }]
};

以及以下 html 模板：

<span data-ng-repeat="item in user.articles">
    {{ item.title }}
</span>

问题是 - 我如何才能运行一段 js 代码，只有在 dom 被 angularjs 更改之后，现在用户拥有的每篇文章都有一个跨度？

Answer 1

如果您只想对特定的插值更改（在您的情况下为 user.articles）做出反应，您可以在控制器中为它设置一个 $watch 侦听器：

$watch('user.articles.length', valueChanged);

如果您只想在 DOM 更改后运行一些代码：

var timeout;

function valueChanged () {
  if (!timeout) {
    // only run doStuffWhenDOMChanged when the $digest loop is finished and call stack is empty:
    timeout = $timeout(doStuffWhenDOMChanged, 10);
  }
}

function doStuffWhenDOMChanged() {
  //do stuff here...
  timeout = null;
}

Answer 2

应用你$timeout来包装你的piece of js code. 然后代码将延迟到下一轮执行。那时，DOM 已经更新了。