javascript - 创建列表并使用 Angular Directive(指令)进行渲染

Question

我正在为 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 =

无论数组中有多少项，输出始终相同。

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

我非常感谢指导我在哪里做错了以达到我想要的结果。

提前致谢。

Answer 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 数组的所有更改都不会反射(reflect)在指令中，因为您对该数组进行了 JSON.stringify 处理。

https://jsfiddle.net/urq3gu5o/