Question

我在使用transclude: true实现自定义指令时遇到了麻烦，该指令可能具有使用ngRepeat的“transclusion”内容。

[我的案例]
我想实现一组指令，这些指令从$ http服务获取它们应该显示的数据。为此，我想使用Angular提供的preLink阶段拦截器，因此我可以捕获数据并将其设置为范围。这样，如果我有一些动态（因为这个术语很好地重载 - 我的意思是在请求完成之前结构未知的数据）来自服务的数据，我依靠它，我将能够检索一个列表动态数据并将其存储在范围内，然后通过HTML中的ngRepeat循环遍历该数据。这是我的问题......

[我的问题]
Angular没有使用我在preLink期间分配给作用域的列表。

[A plunkr]
我给了一个说明我遇到的问题的傻瓜。
http://plnkr.co/edit/XQOm4KWgKxRhn3pOWqzy?p=preview

[我的问题]
我真的相信这种功能是有角度的，我只是在拼图中遗漏了一些东西。
谁能告诉我如何实现这种行为？

谢谢！

修改：
谢谢你 rchawdry 的回答。以下是我的意图的一些细节。为了简单起见，我将尝试给你一个例子。我们假设我们有这些指令：
1. “page” - 该指令是所有页面内容的标记容器。在视觉上它被表示为一些div - 用于标题，用于内容和其他花哨的东西（如果需要）。该指令在页面加载之前不知道它的数据是什么。当页面加载时，指令必须从REST资源中检索自身及其子代的信息！然后该指令设置自身所需的信息（标签和其他东西）并将其子内容存储在 childrenList 范围变量中。它创建了一个范围。
2. “section” - 此部分可以是“page”的孩子。由于“page”正在从服务器检索其数据，因此关于我们的“page”有多少“section”的信息是动态，我们不知道我们需要在屏幕上显示多少“section”。这取决于来自后端的 sectionList 。该部分本身与“page”几乎相同 - 它是一个带标签的容器，区别在于 - a）。 “section”是元素的容器; B）。 “section”会从其parrent中检索其数据而不是发出$ http请求。该指令创建了一个范围。
3. “element” - 对于这个例子，为了不定义许多不同的元素并使其复杂化，让我们假设我有一个元素，叫做“element”。如果需要，它可以包含一些带有“span”和“button”的“输入”。它类似于“section”，它检索从它的parrent显示的数据（在一般情况下，这是“section”或 “页”的）。另一方面，它与“section”的不同之处在于它没有被转换的内容。

现在我们有了一些概念，这就是我想要实现的目标：

<page>
    <element id='element1' someOtherStuffHere...></element>
    <section id='static_section1' someOtherStuffHere...>
        <element id='element2' someOtherStuffHere...></element>
    </section>
    <div class="row" ng-repeat="section in sections">
        <section dynamic_id='dynamic_section'>
            <div class="row" ng-repeat="elem in elements">
                <element dynamic_id='dynamic_element'></element>
            </div>
        </section>
    </div>
</page>

Answer 1

好吧，我相信您尝试实现的功能可以通过在已转换的模板中添加ng-repeat属性来实现。

通过让角度知道“重复”，它应该起作用。

由于plunkr目前无法使用，我无法预览任何预览，也没有原始代码。我试着回忆一下：

template: "<div id='container'>" + 
          "<div class='content' ng-repeat='item in [1]' ng-transclude'></div>" +
          "</div>"

编辑：http://plnkr.co/edit/xba4pU666OGxBtKtcDwl?p=preview

Answer 2

你有一个范围问题。控制器使用未在控制器中定义的变量（arrayListItemsPre和arrayListItemsPost）。虽然它们在指令中声明，但在转换范围内访问它们有点棘手。

简单的方法是执行以下操作。这将把范围变量呈现给可以使用它们的控制器。

app.directive('container', function($compile) {
    return {
        transclude: true,
        scope: true,
        replace: true,
        restrict: 'E',
        template: "<div class='container'>" +
                    "<div class='content' ng-transclude></div>" +
                      "</div>",

        compile: function(cElem, cAttrs) {

            return {
                pre : function preLink(scope, iElement, iAttrs) {

                    console.log("Hello from Container preLinkPhase");

                    scope.$parent.arrayListItemsPre = [1, 2];
                },
                post : function postLink(scope, iElement, iAttrs) {
                  scope.$parent.arrayListItemsPost = [1, 2];
                }
            };
        }
    };
});

还有其他方法可以做得更好，但需要理解为什么要尝试迭代指令中定义的变量。如果您要在具有不同数组元素的另一个页面中使用此指令，则必须更改指令代码。

AngularJS - ng在自定义指令内部重复的转换不能按预期工作

2 个答案: