指令

Question

我正在搞乱AngularJS以创建自定义组件系统。我已经问了一个关于我的组件系统的问题here，所以你可以查看它以了解我的系统应该如何工作（也许它已经改变了一点，但基本的想法仍然是相同的）。 / p>

我试图通过组件指令和ng-include-attribution元素查找子元素，但不知何故事情无法正常工作。

指令

我的指示如下：

.directive("raqComponent", ["ComponentsStyles",
function(componentsStyles){
    return {
        restrict: "E",
        scope: {
            name: "@"
        },
        template: "<div ng-include=\"'/Components/' + name + '.htm'\"></div>",
        controller: function($scope, $timeout){
            componentsStyles.stylesheets.push($scope.name);

            if(components[$scope.name] !== undefined){
                if(components[$scope.name].getData !== undefined){
                    components[$scope.name].getData($scope);
                }
            }
        },
        link: function(scope, elem, attrs){
            if(components[scope.name] !== undefined){
                if(components[scope.name].link !== undefined){
                    console.log("Children:", elem.children());
                    var elemTarget = elem;
                    components[scope.name].link(elemTarget);
                }
            }
        }
    };
}])

在这个用于每个组件的指令中，我使用ng-include指令为我心爱的组件包含标记。组件在单独的文件中实现，以增加模块性。

一旦页面使用了组件，DOM就会在实际页面上显示如下：

现在，元素raq-component有一个属性为ng-include的子元素。然后，此元素具有子元素，该元素是特定组件的自定义标记的根元素。像这样：

<div class="navbar">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="navbar-items-container">
                    <div class="navbar-items">
                        <div ng-repeat="item in items" class="navbar-item">
                            <p>{{item.name}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

但是，当我尝试访问子元素时，我不能这样做。我在指令中打印了子元素，如下所示：

if(components[scope.name].link !== undefined){
    console.log("Children:", elem.children());
    var elemTarget = elem;
    components[scope.name].link(elemTarget);
}

孩子们看起来像这样：

除了没有，出于某种原因！但那是为什么呢？我已经将JQuery与first（），last（）和eq（0）等函数一起使用，但它们没有做任何事情。什么是奇怪的是我可以看到孩子们在没有JQuery的情况下使用Javascript：

所以为什么我不能在link-function中访问子元素？

Answer 1

链接函数实际上是一个后链接函数，将在子元素编译和链接时执行。

然而，来自angular的官方文件：

请注意，包含templateUrl指令的子元素不会已经编译和链接，因为他们正在等待他们的模板加载异步和自己的编译和链接已经暂停，直到发生。

虽然它没有说明，但指令 ngInclude 就像设置templateUrl一样，其模板请求是异步的。

这意味着在调用时间链接函数时， ngInclude 还没有为DOM操作做好准备。你无法得到孩子的元素。

快速解决方案：

将代码放在$scope.evalAsync中，它将在指令的DOM操作之后执行。

AngularJS - 为什么我不能在链接函数中访问子元素？

指令

1 个答案: