javascript - $compile 在递归函数中不起作用

Question

我的JavaScipt代码:

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope, $compile) {
    $scope.number=10;
    $scope.init = function(i) {
        var element = angular.element(document.querySelector('#play'));
        var el = '<h1>{{number}}</h1>';
        el += '<h1>'+i+'</h1>';
        var generated = element.html(el);
        $compile(generated.contents())($scope);
        if(i==0) {
            return false;
        }
        setTimeout($scope.init, 1000, i-1);
    }
});

第一次调用函数 init 时 {{number}} 显示为 10，但当再次调用函数 init() 时 $cope.number 显示为 {{number}}。我的问题是:为什么 $compile 不能正常工作？

Answer 1

演示:http://plnkr.co/edit/ot2CNgUzZoZgIBsgMuCF?p=preview

试试这个:

var app = angular.module("myApp", []);

app.controller("mtCtrl", function($scope, $compile, $timeout) {
    $scope.number=10;
    $scope.init = function(i) {
        var element = angular.element(document.querySelector('#play'));
        var el = '<h1>{{number}}</h1>';
        el += '<h1>'+i+'</h1>';
        var generated = element.html(el);
        $compile(generated.contents())($scope);
        if (i === 0) {
            return false;
        }
        $timeout(function () {
          $scope.init(i-1);
        }, 1000);
    };
    $scope.init(10);
});