使用 angular 指令创建列表和渲染

Question

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

在实际项目中，我所做的是我有一个 Form creator，可以根据用户需要创建和排列不同的组件，然后类似于这个简化示例中使用的指令逐个组件地呈现 from 组件和允许用户填充它。

在这个 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();
},

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

https://jsfiddle.net/urq3gu5o/

使用 angular 指令创建列表和渲染

Creating a list and rendering with angular directives

javascript

angularjs

angular-directive