1

我的内容中有一个代码片段，它是从 http 获取的模型。我正在使用语法荧光笔来美化代码。因此，一旦针对该特定模型更新了 DOM，我就需要调用 javascript 函数。

这是一个示例代码，可以清楚地说明。我正在使用警报来演示它。在我的项目中，我会使用第三方插件，它会找到匹配的 dom 元素并对其进行改造。在这里，我希望在显示列表后发生警报

jsfiddle：http: //jsfiddle.net/7xZde/2/

我的控制器有这样的东西。

$scope.items = Model.notes();
alert('test');

警报甚至在显示项目列表之前就出现了，我想要在显示列表之后。

任何帮助我实现这一目标的提示。

4

2 回答 2

1

我们需要使用 $timeout ，

$scope.items = Model.notes();
$timeout(function () {
    alert('test');
})

是的，这很愚蠢，$timeout 对我来说似乎是用词不当。我已经 2 天了 angularjs 。很抱歉浪费您的时间。

于 2013-10-20T14:14:10.010 回答
0

幸运的是，我想做同样的事情。突变观察者是前进的道路，但如果您需要向后兼容旧版浏览器，您将需要比这更多的代码。

适用于 Firefox、Chrome 和 Safari 的工作插件。

Javascript：

var app = angular.module('plunker', [])

.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
})

.directive('watchChanges', function ($parse, $timeout) {
    return function (scope, element, attrs) {
        var setter = $parse(attrs.watchChanges).assign;

        // create an observer instance
        var observer = new MutationObserver(function (mutations) {
            mutations.forEach(function (mutation) {
                $timeout(function () {
                    var text = angular.element('<div></div>').text(element.html()).text();
                    setter(scope, text);
                });
            });
        });

        // configuration of the observer:
        var config = {
            attributes: true,
            childList: true,
            characterData: true,
            subtree: true
        };

        // pass in the target node, as well as the observer options
        observer.observe(element[0], config);
    };
});

HTML：

  <body ng-controller="MainCtrl">
    <div watch-changes="text">
      <p>Hello {{ name }}</p>
      <label>Name</label>
      <input type="text" ng-model="name" />
    </div>
    <pre>{{text}}</pre>
  </body>
于 2013-10-19T06:59:42.893 回答