Question

大家好我试图抓住我的指示＆＃34;＆＃34;扩展＆＃34; DOM。也就是说，我希望能够找到并操纵指令生成的DOM元素。我认为链接或后链接功能应该这样做，但我一直在寻找我的模板的未扩展版本（或者至少，ng-repeat应该生成的东西不在那里。）这里＆＃ 39;是我的榜样请注意＆＃34; li＆＃34;的计数在前后链接函数中，元素为零，但在超时后，有五个元素。我需要找到五个，但没有超时的肮脏技巧！找到这种结构的正确方法是什么，以便我可以使用它？

编辑：

好的，我相信我已经确定发生的事情是模板确实已被替换为元素（实际上，似乎是在调用预链接函数时。问题在于它没有被评估过＃34;（我认为这个阶段是文档很奇怪地调用＆＃34;插入＆＃34;），即使在调用post link函数时也是如此。

也就是说，如果我在下面的pre，post和timeout函数的主体中，调用打印元素的内部html，我得到：

pre/post html is<ul><!-- ngRepeat: item in list --></ul>

但在超时后有一堆<li>个元素。所以，问题应该是＆＃34;如何在评估/插入模板后获得回调？

（再次编辑，我已经将下面的代码示例更改为与此新说明一致！）

再次编辑以添加建议的$ compile（并使用$ timeout）我注意到这并没有改变任何东西。我认为这个问题与编译没有任何关系，而是与扩展ngRepeat有关，这似乎发生在一个不同的＆＃34;周期＆＃34;以某种方式。

＆＃13;

<!doctype html>
<html data-ng-app="MyModule">

<body data-ng-controller="MyController">
    <h1>Version 3</h1>
    <test></test>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
    <script>
        angular.module('MyModule', [])
            .controller('MyController', function ($scope) {
                $scope.list = [1, 2, 3, 4, 5];
            })
            //.directive('test', function ($compile) {
            .directive('test', function ($compile, $timeout) {
                return {
                    template: '<ul><li ng-repeat=" item in list ">{{item}}</li></ul>',
                    compile: function compile(tElement, tAttrs, transclude) {
                        return {
                            pre: function preLink(scope, iElement, iAttrs, controller) {
                                //console.log('pre, li count is ' + iElement.find('li').length);
                                console.log('pre html is' + iElement.html()); 
                            },
                            post: function postLink(scope, iElement, iAttrs, controller) {
                                //console.log('post, li count is ' + iElement.find('li').length);
                                console.log('post html is' + iElement.html());
                                 iElement.append($compile(this.template)(scope));
                                console.log('post-compile html is' + iElement.html());

                                //setTimeout(() =>
                                $timeout(() => 
                                  console.log('post timeout, li count is ' 
                                    //+ tElement.find('li').length),
                                    + tElement.html()),

                                    10, true);
                            }
                        }
                    }
                };
            });
    </script>
</body>
</html>

＆＃13;

TIA，托比

Answer 1

在link功能中，您可以使用$compile服务来完成＆＃34;完成＆＃34;编译过程。如下所示：

＆＃13;

return {
  link: function(scope, element) {
    var template = '<ul><li ng-repeat=" item in list ">{{item}}</li></ul>';
    var linkFn = $compile(template);
    var content = linkFn(scope);
    element.append(content);
  }
}

＆＃13;

这将生成一个可以遍历的完整DOM元素。您可以在添加之前修改content，也可以在追加element之后修改content。

您经常会看到这个过程的简写，即：

var content = $compile(template)(scope);

不要理解角度指令中的postlink

1 个答案: