$ compile和ng-repeat没有返回正确的元素

时间:2015-03-03 04:26:56

标签: javascript angularjs compilation ng-repeat

我无法$compile手动使用ng-repeat。这里有一个类似的问题:ngRepeat in compiled by $compile does not work,但它并没有在这里解决问题,因为我在范围内手动调用$digest但它仍然无法正常工作。

我指的代码在这里:

JS

angular.module('myApp', []);

angular.module('myApp').directive('test', ['$compile', '$rootScope', '$timeout', 
    function ($compile, $rootScope, $timeout) {
        var myScope = $rootScope.$new();
        myScope.numbers = [1, 2, 3];

        var html = '<div ng-repeat="number in numbers">{{ number }}</div>';
        var html2 = '<div>{{ numbers }}</div>';

        var returnObject = $compile(html)(myScope);
        $timeout(function () {
            myScope.$digest();
            console.log(returnObject);
        });

        return {};
    }
]);

HTML

<html ng-app="myApp">

    <head>
    ...
    </head>

    <body>
        <h1 test>Hello Plunker!</h1>
    </body>

</html>

链接到plunker http://plnkr.co/edit/RC1EILu16GPr0MGmSpcb?p=preview

如果将html变量切换为html2,它将插入并按预期返回对象。但是在目前的状态下,我希望得到一组1,2,3的DIV ...

1 个答案:

答案 0 :(得分:7)

在内部,ng-repeat通过向指令ng-repeat的父元素添加元素来工作。您编译的ng-repeat没有父级添加它的元素,因此无法工作。

添加父div(Plunk

var html = '<div><div ng-repeat="number in numbers">{{ number }}</div></div>';
var html2 = '<div>{{ numbers }}</div>';
var returnObject = $compile(html)(myScope);
    $timeout(function () {
        myScope.$digest();
      console.log(returnObject.children());