创建列表并使用角度指令进行渲染答案

【问题标题】：Creating a list and rendering with angular directives创建列表并使用角度指令进行渲染
【发布时间】：2015-10-18 11:02:24
【问题描述】：

我正在为 MEAN 堆栈做一个学习项目，但我真的被困在需要帮助的事情上。

在实际项目中，我所做的是我有一个表单创建器，可以根据用户需要创建和排列不同的组件，然后类似于此简化示例中使用的指令逐个渲染组件并启用用户来填充它。

在这个JSFiddle 上，正如我所提到的，有一个简化版本，我使用与我想在我的项目中使用的方法类似的方法。

我的逻辑是：我创建一个新数组，在对格式进行小的处理后，我在文本框中输入的所有值都存储在其中，然后我有两个指令可以访问存储数据的工厂函数，即循环遍历所有项目并一一渲染。

我可以看到工厂函数正在工作并按照我的意愿创建数据集。

问题从这里开始：

我这样称呼指令

<render-all-items></render-all-items>

这个指令的定义是

.directive('renderAllItems', function (DataServ) {
    return {
        restrict: 'E',
        scope: {},
        link: function (scope, elem, attrs) {
            scope.values = DataServ.currentTemplate.getAllItems();
        },
        template: '<div ng-repeat="item in values">{{item}}<render-item render="item"></renderItem></div>'
    };
});

这个指令据说会迭代元素列表并一个一个地渲染它们。最初的错字更正后，单个项目渲染正在工作。

模态上的输出是：

[[
Item order = and item value =

]]
Item order = and item value =

无论数组中有多少项，并且总是相同的输出。

我的主要目标很简单：我应该能够使用文本框添加任意数量的项目，然后当我按下打开模式时，我应该能够看到模式对话框中呈现的元素列表。

非常感谢有关我在哪里做错以实现我想要的结果的指导。

提前致谢。

【问题讨论】：

您的 JSFiddle 在控制台上报告错误。
提前道歉，但是我不知道如何在JSFiddle上看到控制台错误。
同本地浏览器。右键单击输出部分Inspect Element。或F12 快捷方式。

标签： javascript angularjs angular-directive

【解决方案1】：

您在这一行有错字：

    <div><pre><render-item render="template.createTemplateItem(textBoxData)"></render-item></pre>

应该是：

    <div><pre><render-item render="template.CreateTemplateItem(textBoxData)"></render-item></pre>

这段代码：

Template.prototype.getAllItems = function () {
    //take a template item object and add it to 
    //the template items repository
    return JSON.stringify(this.items);
};

在链接时由您的 renderAllItems 指令调用一次：

link: function (scope, elem, attrs) {
    scope.values = DataServ.currentTemplate.getAllItems();
},

对该模板的 items 数组的所有更改都不会反映在指令中，因为您 JSON.stringify'd 数组。

https://jsfiddle.net/urq3gu5o/

【讨论】：