$compile和ng repeat未返回正确的元素

$compile and ng-repeat not returning correct element

本文关键字：元素 返回 compile ng repeat      更新时间：2023-09-26

我无法让$compile手动使用ng-repeat。这里有一个类似的问题：$compile编译的ngRepeat不起作用，但它不能解决这里的问题，因为我在作用域上手动调用$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。。。

在内部，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());
相关文章：